accordion
<div class="accordion">
<ul>
<li>
<div class="accordion--header">
<h2>This is the header 1</h2>
</div>
<p class="content">This is the content</p>
</li>
<li>
<div class="accordion--header">
<h2>This is the header 2</h2>
</div>
<p class="content">This is the content</p>
</li>
<li>
<div class="accordion--header">
<h2>This is the header 3</h2>
</div>
<p class="content">This is the content</p>
</li>
<li>
<div class="accordion--header">
<h2>This is the header 4</h2>
</div>
<p class="content">This is the content</p>
</li>
</ul>
</div>
(function($) {
$('.accordion').find('.accordion--header').click(function () {
$('.accordion--header').not($(this)).removeClass('open').next('p.content').slideUp(350);
$(this).toggleClass('open');
$(this).next('p.content').slideToggle(350);
});
})(jQuery);
.accordion {
max-width: 900px;
margin: 0 auto;
li {
list-style-type: none;
outline: 1px solid black;
margin-bottom: 5px;
.accordion--header {
width: 100%;
h2 {
text-align: center;
margin: 0;
}
&:hover {
cursor: pointer;
}
}
p.content {
display: none;
}
}
}