View on GitHub

Noo.js Accordion

Build vertically collapsing accordions without the Collapse JavaScript plugin.

Example

Click the accordions below to expand/collapse the accordion content.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

For example, this is a nested accordion, which allows multiple tabs to be open at the same time:
This is a nested accordion. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is a nested accordion. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Explanation & code

Each accordion item needs its own unique input and a label referring to it. In the example below, the first item has label[for="item1"] referring to input[id="item1"].

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <input class="noojs-button" type="radio" id="item1" name="accordion1">
        <label class="accordion-button collapsed" for="item1">Accordion Item #1</label>
        <div class="accordion-body">
            <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            <br><br>
            For example, this is a nested accordion, which allows multiple tabs to be open at the same time:
            <br>
            <div class="accordion">
                <div class="accordion-item">
                    <input class="noojs-button" type="checkbox" id="item11">
                    <label class="accordion-button collapsed" for="item11">Accordion Item #1</label>
                    <div class="accordion-body">
                        <strong>This is a nested accordion.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                    </div>
                </div>
                <div class="accordion-item">
                    <input class="noojs-button" type="checkbox" id="item12">
                    <label class="accordion-button collapsed" for="item12">Accordion Item #2</label>
                    <div class="accordion-body">
                        <strong>This is a nested accordion.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <input class="noojs-button" type="radio" id="item2" name="accordion1">
        <label class="accordion-button collapsed" for="item2">How to create accordion using the Radio Button method?</label>
        <div class="accordion-body">
            <div>
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <input class="noojs-button" type="radio" id="item3" name="accordion1">
        <label class="accordion-button collapsed" for="item3">Accordion Item #3</label>
        <div class="accordion-body">
            <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </div>
    </div>
</div>


Always open

Replace input[type="radio"] with a input[type="checkbox"] element in each div.accordion-item to make accordion items stay open when another item is opened. For an example, see the nested div above.


Nested accordions

In the example, a nested accordion is included in the first accordion item. Make sure to give each item's input and label unique matching id's, in the case of input[type="radio"] make sure to assign the group that opens and closes the same input[name="accordion1"] in each div.accordion-item to make accordion items stay open when another item is opened. For an example, see the nested div above.