The Worlds Simplest Accordion
No, seriously.
HTML
<div class="accordion-container">
<div class="accordion-section">
<div class="accordion-header">
The header
</div>
<div class="accordion-content">
Cookie cookie jujubes topping powder lollipop cheesecake ice cream sugar plum. Tootsie roll cotton candy cupcake sweet roll chocolate halvah marzipan. Cheesecake muffin candy chupa chups. Chupa chups sesame snaps apple pie chocolate cake sugar plum toffee biscuit bonbon liquorice. Carrot cake cookie oat cake cookie toffee pudding pudding. Cupcake fruitcake biscuit jujubes toffee. Cheesecake candy canes caramels liquorice chocolate bar. Muffin jelly beans cookie candy canes jelly-o chocolate cake pudding. Candy sweet roll marzipan jujubes chocolate brownie sweet roll.
</div>
</div>
<div class="accordion-section">
<div class="accordion-header">
The header 2
</div>
<div class="accordion-content">
Cookie cookie jujubes topping powder lollipop cheesecake ice cream sugar plum. Tootsie roll cotton candy cupcake sweet roll chocolate halvah marzipan. Cheesecake muffin candy chupa chups. Chupa chups sesame snaps apple pie chocolate cake sugar plum toffee biscuit bonbon liquorice. Carrot cake cookie oat cake cookie toffee pudding pudding. Cupcake fruitcake biscuit jujubes toffee. Cheesecake candy canes caramels liquorice chocolate bar. Muffin jelly beans cookie candy canes jelly-o chocolate cake pudding. Candy sweet roll marzipan jujubes chocolate brownie sweet roll.
</div>
</div>
<div class="accordion-section">
<div class="accordion-header">
The header 3
</div>
<div class="accordion-content">
Cookie cookie jujubes topping powder lollipop cheesecake ice cream sugar plum. Tootsie roll cotton candy cupcake sweet roll chocolate halvah marzipan. Cheesecake muffin candy chupa chups. Chupa chups sesame snaps apple pie chocolate cake sugar plum toffee biscuit bonbon liquorice. Carrot cake cookie oat cake cookie toffee pudding pudding. Cupcake...
CSS
* {
font-family: sans-serif; // Just becasue serifs can be ugly
}
html, body {
background-color: white;
padding: 0;
margin: 0;
}
.accordion-content {
height: 0px;
overflow: hidden;
}
.accordion-header {
background-color: #f5f7f7;
padding: 10px 20px;
border-bottom: 1px solid #007fb2;
font-family:
}
.accordion-content__active {
height: auto;
overflow: auto;
}
JavaScript
$(document).ready(function($) {
$('.accordion-header').click(function() {
$(this).parent().siblings('.accordion-section').find('.accordion-content').removeClass('accordion-content__active');
$(this).siblings('.accordion-content').toggleClass('accordion-content__active');
});
});