===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 */ |