<h1>AcidBath Quotes Accordion Menu</h1>
<p class="shameless-advertising">See also: <a href="https://codepen.io/AcidWolf/pen/KrbYxv" target="_blank" title="AcidBath Text Degenerator">Filler Text Degenerator</a></p>
<!--Start Accordion Menu -->
<ul class="accordion-menu">
<li class="open">
<header onclick="toggle(this.parentNode)"><span class="title">"She asked if it would hurt...</span></header>
<section class="content">
<p>
"I smiled and said no<br>
The lie ran down my chin like embryo<br>
She smiles like a corpse<br>
Like zombies eatin dust in Mexico<br>
Life dries cold beneath the dead soul lights<br>
When death sleeps it dreams of you"
  <h6>AcidBath - Dead Girl</h6>
</p>
</section>
</li>
<li class="closed">
<header onclick="toggle(this.parentNode)"><span class="title">"A creature made of sunshine</span></header>
<section class="content">
<p>"her eyes were like the sky<br>
rabbit howls like something old<br>
as we twitch to a lullaby<br>
the scalpel shines in god's sunshine<br>
the streetlights whisper pain<br>
down here near the poison stream<br>
our god has gone insane"<br>
  <h6>AcidBath - Scream of the Butterfly</h6>
</p>
</section>
</li>
<li class="closed">
<header onclick="toggle(this.parentNode)"><span class="title">"The sound of the ocean is dead</span></header>
<section class="content">
<p>"Its just the echo of the blood in your head<br>
Sister burn the temple<br>
And stand beneath the moon<br>
The sound of the ocean is dead<br>
Its just the echo of the blood in your head"</p>
  <h6>AcidBath - Dead Girl</h6>
</section>
</li>

<li class="closed">
<header onclick="toggle(this.parentNode)"><span class="title">"A chilling wargasm that feels like cyanide</span></header>
<section class="content">
<p>"Her pussy bleeds sunshine,<br> rabid for flesh<br>
As each raindrop plunges to its death"<br>
  <h6>AcidBath - Finger Paintings of the Insane</h6></p>
</section>
</li>
<li class="closed">
<header onclick="toggle(this.parentNode)"><span class="title">"Nothing is true... </span></header>
<section class="content">
<p>"and I'm tired of your sad today<br>
your screaming because<br>
There's nothing left for you to say<br>
Bloodless and numb<br>
we orbit the sun<br>
Hungry will this pale thing<br>
Follow me into the sea."
<h6>AcidBath - Graveflower</h6></p>
</section>
</li>


</ul>
h1 {
  text-align:center;
  font-family:'consolas',sans-serif;
}

.shameless-advertising {
  text-align:center;
  font-family:'Impact','Comic Sans MS';
}

a {
  color:#06f;
  text-decoration:none;
}
/* Start Accordion Menu */
ul.accordion-menu {
	list-style:none;
	padding:0;
	font-family:'consolas',sans-serif;
	font-weight:400;
	font-size:16px;

}

ul.accordion-menu li {

	background:none;

	margin:7px 0;

	padding:0;

}

ul.accordion-menu li header:first-letter {
  font-weight:bolder;
  font-family:'helvetica';
}

ul.accordion-menu li header {

	background-color:#DDD;

	border:1px solid #CCC;

	cursor:pointer;

	padding:10px 20px;

	text-align:left;

	transition:all 200ms ease;

	user-select:none;
  
  font-family:'segoe ui',sans-serif;

	-khtml-user-select:none;

	-moz-user-select:none;

	-ms-user-select:none;

	-webkit-touch-callout:none;

	-webkit-user-select:none;

}

ul.accordion-menu li header:hover {

	background-color:#CECECE;

	border-color:#C0C0C0;

}

ul.accordion-menu li section.content {

	border-bottom:1px solid #CCC;

	border-left:1px solid #CCC;

	border-right:1px solid #CCC;

	max-height:180px;

	overflow:hidden;

	padding:20px;

	transition:all 200ms linear;

}

ul.accordion-menu li section.content p {

	margin:0;
  font-family:'constantia',serif;

}

ul.accordion-menu li section.content p:first-letter {
  font-weight:bolder;
  font-size:1.666em;
}


ul.accordion-menu li.closed section.content {

	max-height:0;

	padding:0 20px;

}

ul.accordion-menu li.open header {

	background-color:#d93434;

	border:1px solid #b02929;

}

ul.accordion-menu li.open header span.title {

	color:#FFF;

}
function toggle(e) {
	if(e.className == 'closed') {
		e.className = 'open';
	}
	else {
		e.className = 'closed';
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.