Accordions

Accordions are used to provide a clickable area that expands a content section with more content. These are excellent for things such as frequently asked questions.

If you'd like to have the accordion only display one entry at a time, change the input type from "checkbox" to "radio" and provide the same name attribute for all the radio buttons in the accordion.

Accordion Example

Question 1

Answer to question 1 goes here

Question 2

Answer to question 2 goes here

Accordion Code

<section class="accordion">
    <h2 class="accordion-title">Accordion Example</h2>
    <div class="accordion-entry">
        <input type="checkbox" id="faq1" />
        <label class="accordion-entry-label" for="faq1">Question 1</label>
        <div class="accordion-content">Answer to question 1 goes here</div>
    </div>
    <div class="accordion-entry">
        <input type="checkbox" id="faq2" />
        <label class="accordion-entry-label" for="faq2">Question 2</label>
        <div class="accordion-content">Answer to question 2 goes here</div>
    </div>
</section>