ymnj
1/29/2018 - 6:49 PM

Force Accordian

.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>