Foundation Documentation

Accordion

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.

  • Accordion 1
  • Accordion 2

    Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Accordion 3
    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Basic

You can create an accordion using minimal markup like so:

HTML

<!-- If you are using version 5.5 or greater you can use <ul>'s and <li>'s for Accordion markup --> 

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>

<!-- Also works with <dl>'s and <dt>'s in place of <ul>'s and <li>'s. --> 

<dl class="accordion" data-accordion>
  <dd class="accordion-navigation">
    <a href="#panel1b">Accordion 1</a>
    <div id="panel1b" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel2b">Accordion 2</a>
    <div id="panel2b" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel3b">Accordion 3</a>
    <div id="panel3b" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
</dl>

<!-- You can also use data-content instead of href to point to the content of the accordion -->

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#" data-content="panel3a">Accordion 1</a>
    <div id="panel3a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#" data-content="panel3b">Accordion 2</a>
    <div id="panel3b" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#" data-content="panel3c">Accordion 3</a>
    <div id="panel3c" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>

Rendered HTML

  • Accordion 1
    Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion 2
    Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion 3
    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Note: Accordion used to require <dl> and <dd> markup. It now works with <ul>'s and <li>'s as well. You need v5.5+ to use the newer markup.

Distributed accordion groups

You can name the accordion so that it can be spread across different parent containers. In this example the accordion is named myAccordionGroup and it is split between different columns in a block grid. This allows the accordion to be responsive to screen width.

HTML

<ul class="small-block-grid-1 medium-block-grid-3">
  <li>
    <ul class="accordion" data-accordion="myAccordionGroup">
      <li class="accordion-navigation">
        <a href="#panel1c">Accordion 1</a>
        <div id="panel1c" class="content">
          Panel 1. Lorem ipsum dolor
        </div>
      </li>
      <li class="accordion-navigation">
        <a href="#panel2c">Accordion 2</a>
        <div id="panel2c" class="content">
          Panel 2. Lorem ipsum dolor
        </div>
      </li>
      <li class="accordion-navigation">
        <a href="#panel3c">Accordion 3</a>
        <div id="panel3c" class="content">
          Panel 3. Lorem ipsum dolor
        </div>
      </li>
    </ul>
  </li>
  <li>
    <ul class="accordion" data-accordion="myAccordionGroup">
      <li class="accordion-navigation">
        <a href="#panel4c">Accordion 4</a>
        <div id="panel4c" class="content">
          Panel 4. Lorem ipsum dolor
        </div>
      </li>
      <li class="accordion-navigation">
        <a href="#panel5c">Accordion 5</a>
        <div id="panel5c" class="content">
          Panel 5. Lorem ipsum dolor
        </div>
      </li>
      <li class="accordion-navigation">
        <a href="#panel6c">Accordion 6</a>
        <div id="panel6c" class="content">
          Panel 6. Lorem ipsum dolor
        </div>
      </li>
    </ul>
  </li>
</ul>

Rendered HTML

Accessibility

For accessible accordions use the markup below, which adds a some of ARIA attributes and roles. Some attributes are automatically added and toggled by the JavaScript.

HTML

<ul class="accordion" data-accordion role="tablist">
  <li class="accordion-navigation">
    <a href="#panel1d" role="tab" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
    <div id="panel1d" class="content active" role="tabpanel" aria-labelledby="panel1d-heading">
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2d"  role="tab" id="panel2d-heading" aria-controls="panel2d">Accordion 2</a>
    <div id="panel2d" class="content" role="tabpanel" aria-labelledby="panel2d-heading">
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3d" role="tab" id="panel3d-heading" aria-controls="panel3d">Accordion 3</a>
    <div id="panel3d" class="content" role="tabpanel" aria-labelledby="panel3d-heading">
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

Rendered HTML

Callbacks

There are two ways to bind to callbacks in your tabs.

Callback function

<script>
  $(document).foundation({
    accordion: {
      callback : function (accordion) {
        console.log(accordion);
      }
    }
  });
</script>

Toggled Event

<script>
  $('#myAccordionGroup').on('toggled', function (event, accordion) {
    console.log(accordion);
  });
</script>

Customize with Sass

Accordions can be easily customized with the Sass variables provided in the _settings.scss file.

SCSS

$include-html-accordion-classes: $include-html-classes;

$accordion-navigation-padding: rem-calc(16);
$accordion-navigation-bg-color: $silver;
$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
$accordion-navigation-active-font-color: $jet;
$accordion-navigation-font-color: $jet;
$accordion-navigation-font-size: rem-calc(16);
$accordion-navigation-font-family: $body-font-family;

$accordion-content-padding: $column-gutter/2;
$accordion-content-active-bg-color: $white;

Configure With Javascript

It's easy to configure dropdowns using our provided Javascript. You can use data-attributes or plain old Javascript. Make sure jquery.js, foundation.js and foundation.accordion.js have been included on your page before continuing. For example, add the following before the closing <body> tag:

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>

Optional Javascript Configuration

JS

$(document).foundation({
  accordion: {
    // specify the class used for accordion panels
    content_class: 'content',
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: true,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }
});

Adding New Accordion Content After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('accordion', 'reflow');

Semantic Markup With Sass Mixins

You can use the a accordion-container(), accordion-navigation, and accordion-navigation mixins to create your own accordion with semantic markup, like so:

SCSS

.your-accordion-class  {
  @include accordion-container;

  .your-accordion-navigation-class  {
    @include accordion-navigation;
  }

  .your-accordion-content-class  {
    @include accordion-content;
  }
}
##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

scss @import "foundation/components/accordion";

Building Blocks Using Accordion


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »

Foundation for Sites

Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.

Want more?

Talk to us

Tweet us at
@ZURBfoundation

Business Support

Or check our support page

Stay Updated

Keep up with the latest on Foundation. Find us on Github.

Stay Connected
Studios Helping more than 200 startups succeed since 1998.
Foundation The most advanced front-end framework in the world.
Notable Design Apps Prototype, iterate and collect feedback on your products.
University Ideas, thoughts and design resources shared with you.

© 1998‐2015 ZURB, Inc. All rights reserved.