Setting up content to expand and collapse

An accordion element is used to expand and collapse content that is broken into logical sections, much like tabs. It allows you to create and display content in an expanding and collapsing fashion—much like an accordion. Check out more documentation for implementing the accordion navigation on the Foundations Theme.

Note: An accordion previously required <dl> and <dd> markup. The tag is used to describe a term/name in a description list and used in conjunction with the tag—it defines a description list. It now works with <ul>'s and <li>'s as well.

FYI: ul stands for unordered list. li stands for list item. Those are the HTML tags for bulleted lists as opposed to numbered lists, which are specified by ol for ordered list.

See an example of a working accordion below.

Example Code for an Accordion

Basic HTML code : You can create an accordion using minimal markup. The following HTML code you can copy and paste to your source code of WYSIWYG Filtered. Change the names 'Accordion 1/2/3' with yours. Also, add your content in the area that says 'Add your content here'.

<dl class="accordion" data-accordion>
  <dd class="accordion-navigation">
    <a href="#panel1b">Accordion 1</a>
    <div id="panel1b" class="content">
        Add your content here
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel2b">Accordion 2</a>
    <div id="panel2b" class="content">
       Add your content here
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel3b">Accordion 3</a>
    <div id="panel3b" class="content">
      Add your content here
    </div>
  </dd>
</dl>

Example of Working Accordion Elements