<div class="accordion">
<div class="panel">
<div class="panel-header">
<h1>HTML</h1>
</div>
<div class="panel-body">
<p>helllo</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h1>HTML</h1>
</div>
<div class="panel-body">
<p>helllo</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h1>HTML</h1>
</div>
<div class="panel-body">
<p>helllo</p>
</div>
</div>
</div>
.accordion {
width: 450px;
margin: auto;
}
.panel {
border: 1px solid #222;
padding: 5px;
}
.panel-body {
display: none;
}
.panel-header h1:hover {
text-decoration: underline;
cursor: pointer;
}$(".panel-header h1").on('click', function(){
//$(".panel-body").toggle();
$(this).parent().siblings('.panel-body').toggle();
});
External CSS
This Pen doesn't use any external CSS resources.