Simple Accordion
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Simple" />
<meta name="description" content="CDN Bootstrap">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="section main-section">
<div class="container">
<div class="row">
<div class="content">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<p>A simple accordion that let's you control the toggle state of the header to either show or hide it's content by clicking on the title. You can also control the auto hide feature of content to either continue to show the content of other accordions or autohide. See comments inside the JS.</p>
<p>You also don't need Bootstrap for this, I just like to style stuff.</p>
</div>
</div>
<div class="acc-head list-group-item">Header One</div>
<div class="acc-body">Now is the time for all good men to come to to the aid of their party.</div>
<div class="acc-head list-group-item">Header Two</div>
<div class="acc-body">Now is the time for all good men to come to to the aid of their party.</div>
<div class="acc-head list-group-item">Header Three</div>
<div class="acc-body last">Now is the time for all good men to come to to the aid of their party.</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.acc-body{
display:none;
}
.content{
margin: 20px 0 20px 0;
font-family: 'Lato', sans-serif;
}
.acc-head{font-size:20px;}
.acc-body{
padding:20px;
font-size:16px;
border-style:solid;
border-width: 0 1px 0 1px;
border-color: #ddd;
}
.acc-body.last{
border-width: 0 1px 1px 1px;
}
.panel-body{
font-size:18px;
}
JAVASCRIPT
$(document).ready(function() {
var $container = jQuery('.acc-body'), $acc_head = jQuery('.acc-head');
$acc_head.last().addClass('last');
$acc_head.on('click', function(e) {
if( jQuery(this).next().is(':hidden') ) {
//Comment or uncomment the line below to control other open accordions when acc-head is clicked.
$acc_head.removeClass('active').next().slideUp(300);
jQuery(this).toggleClass('active').next().slideDown(300);
}
else{
//Comment or Uncomment out the line below to add or remove the toggle function from acc-head
jQuery(this).toggleClass('active').next().slideToggle(300);
}
e.preventDefault();
});
});
