Skip to content

Instantly share code, notes, and snippets.

@nessthehero

nessthehero/Semantic Accordions

Forked from anonymous/README.md
Last active December 22, 2015 15:59
Show Gist options
  • Save nessthehero/6496602 to your computer and use it in GitHub Desktop.
Save nessthehero/6496602 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
Semantic Accordions
# Accordions
Self contained, repeatable, and unpack when there is no JavaScript.
Raw
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 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment