Accordion

Renders an accordion.

HTML tags <details> and <summary> are used.

Simple Syntax

Code

<> Open this Accordion
Now you see the content

which may
span several lines
<>

Output

Multiple Accordions

→ Opening one accordion automatically closes the others.

<> A
Aaaa
<> B
Bbbb
<> C
Cccc
<>

Pre-Open

<> A
Aaaa
<> B {: !open } // ← this one will be opened initially
Bbbb
<> C
Cccc
<>

Styling

Applying a frame

<> Open this Accordion {: !frame }
Now you see the content

which may
span several lines
<>

CSS-Variables

--mdp-accordion-summary-txt-color: yellow;
--mdp-accordion-summary-bg-color: navy;
--mdp-accordion-summary-indent: 1rem;
--mdp-accordion-body-txt-color: navy;
--mdp-accordion-bodyy-bg-color: yellow;
--mdp-accordion-body-padding: 1rem;
--mdp-accordion-frame: 3px dashed magenta;

Note:
MarkdownPlus only renders naked HTML code for accordions:

<div class="mdp-accordion">
    <details>
        <summary>Open this Accordion</summary>
        <div class="mdp-accordion-body">
            <p>Now you see the content<br>
            which may
            span several lines</p>
        </div>
    </details>
</div>

The styling and animation you see in this page is provided by the PageFactory plugin.