<ul class="accordion">
<li>
<button class="accordion-control">Sentence One</button>
<div class="accordion-panel">Sentence one content goes here...</div>
</li>
<li>
<button class="accordion-control">Sentence Two</button>
<div class="accordion-panel">Sentence two content goes here...</div>
</li>
<li>
<button class="accordion-control">Sentence Three</button>
<div class="accordion-panel">Sentence three content goes here...</div>
</li>
<li>
<button class="accordion-control">Sentence Four</button>
<div class="accordion-panel">Sentence four content goes here...</div>
</li>
<li>
<button class="accordion-control">Sentence Five</button>
<div class="accordion-panel">Sentence five content goes here...</div>
</li>
<li>
<button class="accordion-control">Sentence Six</button>
<div class="accordion-panel">Sentence six content goes here...</div>
</li>
<li>
<button class="accordion-control">Sentence Seven</button>
<div class="accordion-panel">Sentence seven content goes here...</div>
</li>
<li>
<button class="accordion-control">Sentence Eight</button>
<div class="accordion-panel">Sentence eight content goes here...</div>
</li>
</ul>@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body{
background:#222;
font-family:'Montserrat';
}
.accordion{
width:90%;
max-width:600px;
list-style:none;
/* border:1px solid red; */
padding: 0;
margin: 0 auto;
}
li{
display: flex;
flex-direction:column;
}
li + li{
/* margin-top: 1em; */
border-top:1px solid white;
}
.accordion-control{
text-align: left;
font-size:1.2rem;
font-family:'Montserrat';
background:#000;
color:white;
border:none;
padding: 0.8em 1em;
cursor:pointer;
}
.accordion-panel{
padding: 1em;
background:#444;
color:#f4f4f4;
display: none;
}$('.accordion').on('click', '.accordion-control', function(e){
e.preventDefault(); //prevent default action of a button
$(this) //get the element the user clicked on
.next('.accordion-panel') //select the next accordion panel
.not(':animated') //if it is not currently animating
.slideToggle(); //use slideToggle to show or hide it
})
External CSS
This Pen doesn't use any external CSS resources.