collapsable sections

[hellt]

Was it ever suggested to enable collapse-able section? When reading long pages it is useful to be able to collapse a certain section if that seems not important at the time of reading, instead of scrolling to the next one.

Below is the example of this function on one of docs sites I use:

[ben519]

Nice post! (The visual is great.)

Note that this is kind of achievable with collapsible admonitions.

[hellt]

yes, collapsable admonitions are great for inlining information one wouldn't want to display by default.

This idea is more like a site-wide setting for headings

[ben519]

I understand the difference, but personally I don't think this feature "adds enough" to warrant development time. I'd rather see things like blog features and continued bug fixes get prioritized over this (sorry!). Hopefully others will chime in with their thoughts.

[hellt]

me too. This is just an idea that might be implemented some day and enrich the collection of features mkdocs-material has today

[squidfunk]

Thanks for suggesting. Could be achievable with some JS and CSS, but is out of scope for this project.

[lmmx]

Just in case people weren't aware, you can get this in mkdocs without changing anything by just wrapping the part you want to be collapsible inside a details tag after a summary tag

<details><summary>Click to show</summary>

The collapsed section's content goes here

</details>

[squidfunk]

We're also looking into this as part of #6289.

[stejackson94]

I was hoping to have multiple of these on one page, but it seems as soon as i put one in, all the sections fall inside each other

any ideas?

[txabot]

Where and how can I customize the color and icon of the summary tag? thx!

[txabot]

I'm answering to myself:

??? faq "This is a question"
      I'm saying something here. Below are break-down questions:
      <details class="faq">
         <summary>Click to show</summary>
         The collapsed section's content goes here
      </details>
      <details class="faq">
         <summary>Click to show</summary>
         The collapsed section's content goes here
      </details>

css:

:root {
    --md-admonition-icon--faq: url(/assets/faq.svg)}
  .md-typeset .admonition.faq,
  .md-typeset details.faq {
    border-color: #FF8D1A;
  }
  .md-typeset .faq > .admonition-title,
  .md-typeset .faq > summary {
    background-color: rgba(155, 120, 43, 0.1);
  }
  .md-typeset .faq > .admonition-title::before,
  .md-typeset .faq > summary::before {
    background-color: #FF8D1A;
    -webkit-mask-image: var(--md-admonition-icon--faq);
            mask-image: var(--md-admonition-icon--faq);
  }

[nimafanniasl]

Hey!
There is a problem with "details summary" ! Markdown doesn't get shown in it!

[alexvoss]

That is normal behavior. You can include Markdown in HTML if you use the Markdown in HTML extension. Note that you need to add the markdown attribute to every HTML tag that surrounds the Markdown.

An alternative is to use the new and experimental block syntax of the PymDown Extensions instead of writing raw HTML.

[nimafanniasl]

Thanks a lot!
I'm trying both of them out right now :)