Accordion
Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.
-
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.
Basic
You can create an accordion using minimal markup like so:
HTML
<dl class="accordion" data-accordion>
<dd>
<a href="#panel1">Accordion 1</a>
<div id="panel1" class="content active">
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
<dd><a href="#panel2-3">Tab 3</a></dd>
<dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
<div class="content" id="panel2-4">
<p>Fourth panel content goes here...</p>
</div>
</div>
</div>
</dd>
<dd>
<a href="#panel2">Accordion 2</a>
<div id="panel2" 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>
<a href="#panel3">Accordion 3</a>
<div id="panel3" 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>Rendered HTML
- 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. 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.
Customize With Sass
Accordions can be easily customized with the Sass variables provided in the _settings.scss file.
SCSS
$accordion-navigation-padding: rem-calc(16);
$accordion-navigation-bg-color: #efefef;
$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-font-color: #222;
$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: #fff;Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/accordion";