Skip to content

Instantly share code, notes, and snippets.

Created September 9, 2013 14:45
Show Gist options
  • Save anonymous/6496597 to your computer and use it in GitHub Desktop.
Save anonymous/6496597 to your computer and use it in GitHub Desktop.
Accordion

===Accordions===

Self contained, repeatable, and unpack when there is no JavaScript.

<section class="accordion">
<h2>Section 1</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, rerum, magnam est ex et explicabo veritatis omnis neque quaerat praesentium autem cum in asperiores vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, rerum, magnam est ex et explicabo veritatis omnis neque quaerat praesentium autem cum in asperiores vel.</p>
</div>
</section>
<section class="accordion open">
<h2>Section 2</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, rerum, magnam est ex et explicabo veritatis omnis neque quaerat praesentium autem cum in asperiores vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, rerum, magnam est ex et explicabo veritatis omnis neque quaerat praesentium autem cum in asperiores vel.</p>
</div>
</section>
.accordion { }
.js .accordion h2 { }
.js .accordion h2:after { /* For Plus/Minus icon */ }
.js .accordion.open h2 { }
.js .accordion.open h2:after { }
.js .accordion .content { display: none; }
.js .accordion.open .content { display: block; }
.js .accordion + .accordion { margin-top: -5px; } /* Crunches closed accordions together */
/* If no JS, uses default H2 and P styles */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment