markup.html

<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>

Semantic Accordions

# Accordions

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

style.css

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