Accordion

Give a set of detail elements the same name attribute and they will behave like an accordion, with only one item open at a time.

Accordion item 1

Show something

Accordion item 2

Show something

Accordion item 3

Show something

Code

<div class="accordion">
    <details class="accordion-item blue-collapse" name="accordion">
        <summary class="accordion-header">
            <header class="accordion-button collapsed">Accordion item 1</header>
        </summary>
        <div class="accordion-body">Show something</div>
    </details>

    <details class="accordion-item blue-collapse" name="accordion">
        <summary class="accordion-header">
            <header class="accordion-button collapsed">Accordion item 2</header>
        </summary>
        <div class="accordion-body">Show something</div>
    </details>

    <details class="accordion-item blue-collapse" name="accordion">
        <summary class="accordion-header">
            <header class="accordion-button collapsed">Accordion item 3</header>
        </summary>
        <div class="accordion-body">Show something</div>
    </details>
</div>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

Copy and paste the following code into your project. Source: @/dist/styles/_accordion.scss
Copy and paste the following code into your project. Source: @/dist/styles/_collapse.scss

Edit post on GitHub

Accordion

Example

Live demo

Code

Grab the code