.acc-container {
width:100%;
margin:30px auto 0 auto;
overflow:hidden;
border: 1px solid black;
}
.acc-btn {
width:100%;
margin:0 auto;
padding:20px 25px;
cursor:pointer;
background-color: #e6e6e6;
}
.acc-content {
height:0px;
width:100%;
margin:0 auto;
overflow:hidden;
}
.acc-content-inner {
padding:30px;
}
.open {
height: auto;
}
h1 {
font:700 20px/26px 'Lato', sans-serif;
color:#798795;
}
p {
font:400 16px/24px 'Lato', sans-serif;
color:#798795;
}
acc-btn p.selected {
margin-bottom: 0 !important;
}
.selected {
color:#798795;
}
//ICON INDICATORS. CHECK PERSMISSON CAPITAL SITE
h1 .indicator:before {
content: '+';
font-size: 20px;
margin-right: 15px;
}
h1.selected .indicator:before {
content: '-';
font-size: 20px;
margin-right: 15px;
}
(function ($, Drupal) {
//do something
Drupal.behaviors.slider = {
attach: function(context, settings) {
var animTime = 300,
clickPolice = false;
$(document).on('touchstart click', '.acc-btn', function(){
if(!clickPolice){
clickPolice = true;
var currIndex = $(this).index('.acc-btn'),
targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();
$('.acc-btn h1').removeClass('selected');
$(this).find('h1').addClass('selected');
$('.acc-content').stop().animate({ height: 0 }, animTime);
$('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
setTimeout(function(){ clickPolice = false; }, animTime);
}//End IF
})//End ready
}
}
})(jQuery, Drupal);
<div class="acc-container">
<div class="acc-btn">
<h1 class="selected">TITLE HERE</h1>
</div>
<div class="acc-content open">
<div class="acc-content-inner">
<p>CONTENT HERE</p>
</div>
</div>
<div class="acc-btn">
<h1>TITLE HERE</h1>
</div>
<div class="acc-content">
<div class="acc-content-inner">
<h1>CONTENT HERE</h1>
</div>
</div>
<div class="acc-btn">
<h1>TITLE HERE</h1>
</div>
<div class="acc-content">
<div class="acc-content-inner">
<h1>CONTENT HERE</h1>
</div>
</div>
</div>