Benjamin L. Stewart

Properties2
tags—
notes

5 min read

plugin literally called Toggle now exists and gives Notion-style |> ... <| toggles inside Obsidian. (Obsidian Community) The problem is that Quartz does not natively understand that custom syntax, so I would not choose it for content you expect to work on your public website.

For your setup, the safest options are:

  1. Quartz collapsible callouts — best compatibility. Quartz v5 explicitly supports Obsidian callouts, including collapsible and nested variants. (GitHub) Example:
> [!note]- Click to expand
> 
> This content starts collapsed.
>
> You can put several paragraphs here.

Use - for collapsed by default and + for expanded by default.

  1. Details Markdown plugin — closest to a real Notion-style toggle. The Details Markdown Obsidian plugin lets you author native HTML <details> / <summary> blocks while rendering Markdown inside them in Obsidian Reading View. (Obsidian Community) For example:
<details>
<summary>Click to expand</summary>
 
### Additional information
 
This can contain paragraphs, lists, links, and other Markdown.
 
</details>

This approach is attractive because <details> and <summary> are native web elements rather than proprietary plugin syntax. Quartz’s Obsidian-flavored Markdown transformer also has an option for processing content inside HTML embeds (enableInHtmlEmbed). (GitHub)

What I would choose for you

Because you’ve already found collapsible callouts cumbersome for nested toggles and large blocks of pasted material, I would try Details Markdown next.

It gives you a much more Notion-like structure:

<details>
<summary>Week 4 Activities</summary>
 
Content here...
 
<details>
<summary>Activity 1</summary>
 
Details for Activity 1...
 
</details>
 
<details>
<summary>Activity 2</summary>
 
Details for Activity 2...
 
</details>
 
</details>
<details>
<summary><h2>Monday</h2></summary>
 
Content here...
 
</details>

That is much easier to reason about for toggle-inside-toggle layouts than deeply nested callout blockquotes.

One caveat: Details Markdown currently targets Reading View; its documentation says Live Preview support is not yet available. (GitHub)

So my recommendation is: install Details Markdown, test one small toggle page, publish it to Quartz, and verify the website rendering before converting your modules. If Quartz needs one configuration adjustment for Markdown inside <details>, we can make that once and then you’ll have a reusable Notion-like toggle system across your site.

Adding headings

Details Markdown does not parse Markdown inside the <summary> itself. So this will not give you a heading:

<summary>## Week 4 Activities</summary>

The plugin documentation explicitly says Markdown rendering inside the summary is out of scope. (GitHub)

You can, however, use an actual HTML heading inside the summary:

<details>
<summary><h2>Week 4 — From Draft to Final Paragraph</h2></summary>
 
Your content goes here.
 
</details>

Or a smaller heading:

<details>
<summary><h3>Activity 1 — Review</h3></summary>
 
Review the concepts from this week's module.
 
</details>

For your course modules, I would probably use <h2> for the main outer toggle and ordinary summary text for nested toggles:

<details>
<summary><h2>Week 4 — From Draft to Final Paragraph</h2></summary>
 
<details>
<summary>Activity 1 — Review</summary>
 
Activity content...
 
</details>
 
<details>
<summary>Activity 2 — Practice</summary>
 
Activity content...
 
</details>
 
</details>

That is valid HTML, and the plugin preserves the native <summary> element while rendering the body as Markdown. (GitHub)

One caveat: depending on Obsidian/Quartz CSS, putting an actual <h2> inside <summary> can make the disclosure triangle alignment or spacing look a little unusual. If that happens, the cleaner long-term option is to leave the summary as:

<summary>Week 4 — From Draft to Final Paragraph</summary>

and style the first-level summary to look like an H2 with CSS. That usually produces a more polished Notion-like result on both Obsidian and your Quartz website.

If you want, I can show you the CSS for making the outer summary look like an H2 while nested summaries stay smaller.

The important limitation is that Obsidian does not parse [[wikilinks]] as Markdown when they are inside a raw HTML <details> block. So your current:

<details>
<summary>Word Order Choices</summary>
[[Dative Alternation]]
</details>

will display [[Dative Alternation]] literally, as in your screenshot. This is expected behavior. (Obsidian Forum)

Instead, make the Obsidian link itself HTML.

For your exact example

<details>
<summary><h2>Tuesday, September 15, 2026</h2></summary>
 
<details>
<summary>Word Order Choices</summary>
 
<a 
  class="internal-link"
  data-href="Dative Alternation"
  href="Dative Alternation.md">
  Dative Alternation
</a>
 
</details>
 
</details>

Obsidian recognizes links with class="internal-link"; using data-href also helps Obsidian identify the target note. (Obsidian Forum)

If the note is in another folder, use its vault-relative path. For example:

<a
  class="internal-link"
  data-href="Current Courses/Discourse Analysis/Modules/Dative Alternation"
  href="Current Courses/Discourse Analysis/Modules/Dative Alternation.md">
  Dative Alternation
</a>

That would give you approximately:

▼ TUESDAY, SEPTEMBER 15, 2026
  ▼ Word Order Choices
    Dative Alternation ← clickable Obsidian note link

You can also make the toggle text itself the link

For example:

<details>
<summary>
  <a
    class="internal-link"
    data-href="Dative Alternation"
    href="Dative Alternation.md">
    Word Order Choices
  </a>
</summary>
 
Additional information here.
 
</details>

I wouldn’t recommend this version, though. Clicking the text can conflict with clicking the <summary> to expand/collapse the toggle. Keeping the toggle title and destination link separate is more predictable.

There is one other important consideration for your Obsidian → Quartz website setup: raw HTML links like this are not equivalent to normal [[wikilinks]]. In particular, they may not participate in Obsidian backlinks/link indexing in the same way, and Quartz may need the published URL rather than the vault .md path. Users have also reported that HTML-generated internal links don’t necessarily behave like ordinary Obsidian links in every context. (Obsidian Forum)

Because you’re using these toggles extensively on your course pages, I think there is an even better solution: keep writing normal [[Dative Alternation]] links in Markdown and use CSS/Obsidian callouts to create the collapsible appearance instead of raw <details> HTML. That would preserve Obsidian autocomplete, backlinks, renaming, and your Quartz publishing workflow.

If you want, I can show you how to reproduce exactly the toggle appearance in your first screenshot while still using ordinary [[Obsidian links]] inside it.

Graph View