<div class="accordion">
<div class="accordion__wrapper">
<h1>Accordion</h1>
<div class="accordion__item">
<div class="accordion__question">
<h2>How do I love thee?</h2>
</div>
<div class="accordion__answer">
<p>
Let me count the ways. / I love thee to the depth and breadth and height / My soul can reach, when feeling out of sight / For the ends of being and ideal grace. (Elizabeth Barrett Browning)
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__question">
<h2>Can you be sick for a home you’ve never seen?</h2>
</div>
<div class="accordion__answer">
<p>
Sometimes the curtain flutters, / and I catch a glimpse / of a fawn in the shadow / that bids me to follow. / I can’t. Not yet. / But I am coming home. (Jen Rose)
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__question">
<h2>Why, who makes much of a miracle?</h2>
</div>
<div class="accordion__answer">
<p>
As to me I know nothing else but miracles, / Whether I walk the streets of Manhattan, / Or dart my sight over the roofs of houses toward the sky, / Or wade with naked feet along the beach just in the edge of the water... (Walt Whitman)
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__question">
<h2>Shall I compare thee to a summer’s day?</h2>
</div>
<div class="accordion__answer">
<p>
Thou art more lovely and more temperate: / Rough winds do shake the darling buds of May, / And summer’s lease hath all too short a date: / Sometime too hot the eye of heaven shines... (William Shakespeare)
</p>
</div>
</div>
</div>
</div>$color_shadow: #7eb4e2;
$gradient_left: linear-gradient(to left, $color_shadow, #f5f5f5);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
font-family: 'Amatic SC', cursive;
font-size: 50px;
padding-bottom: 20px;
text-align: center;
}
.accordion {
font-family: 'Lato';
color: #4a4a4a;
margin: 100px 400px;
font-size: 16px;
line-height: 1.2;
width: 660px;
min-width: 360px;
&__answer {
display: none;
padding: 10px 40px 0;
}
&__item {
margin-bottom: 30px;
}
&__question {
position: relative;
background: $gradient_left;
border-radius: 15px 15px 0 0;
padding: 8px 15px 8px 40px;
font-size: 1em;
cursor: pointer;
}
&__question::before {
content: '';
display: inline-block;
border: solid #555;
border-width: 0 2px 2px 0;
padding: 3px;
position: absolute;
top: 40%;
right: 50px;
transform: rotate(45deg);
transition: transform .2s linear;
}
}
.expanded.accordion__question::before {
content: '';
border: solid #555;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
position: absolute;
top: 50%;
right: 50px;
transform: rotate(-135deg);
transition: transform .2s linear;
}
$('.accordion__answer:first').show();
$('.accordion__question:first').addClass('expanded');
$('.accordion__question').on('click', function() {
var content = $(this).next();
$('.accordion__answer').not(content).slideUp(400);
$('.accordion__question').not(this).removeClass('expanded');
$(this).toggleClass('expanded');
content.slideToggle(400);
});
External CSS
This Pen doesn't use any external CSS resources.