<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';
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.