Sariksa Thapa Sariksa Thapa - 4 months ago 9
Javascript Question

jQuery custom accordion, couldn't make it collapsible

I have a custom accordion, like jQuery UI accordion. I am also trying to make any expanded item collapsible (if it is clicked again). Something like this: https://jqueryui.com/accordion/#collapsible
But I am unable to figure out how to capture another click event on the currently expanded item. Can someone point me to the right direction?

<div class="dropdown">
<div class="style1 dropdown-link" style='background-color: rgb(75, 78, 80);'>Timecard Error Message</div>
<div class="style2 dropdown-container" style="display: none">
<div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
</p>
</div>
</div>
</div>
<div class="dropdown">
<div class="style1 dropdown-link" style="background-color: rgb(84, 88, 90);">Worklist Emails</div>
<div class="style2 dropdown-container" style="display: none;">
<div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!

</div>
</div>
</div>


and my jQuery is sth like below:

$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
$(".dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$("div.dropdown-link").css('background-image',''); //reset the background so CSS Background takes over
$("div.dropdown-container").css('display','none');
$("div.dropdown-link").css('background-color','#54585a');
$("div.dropdown-link").css('border','none');
if($("div.dropdown-container", $dropdown).css('display','none')){
$("div.dropdown-link", $dropdown).css('background-color','#4b4e50');
$("div.dropdown-link", $dropdown).css({'border-bottom':'1px dotted white', 'border-top':'1px dotted white'});
$("div.dropdown-container", $dropdown).css('display','inline-block');
$("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/arrowdown.png")');
}else{
$("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/img/arrow.png")');
$("div.dropdown-container", $dropdown).css('display','none');
$("div.dropdown-link", $dropdown).css('background-color','#54585a');
$("div.dropdown-link", $dropdown).css('border', 'none');
}
return false;
});
});
});


Here is the jsbin: http://jsbin.com/hazaxunuwa/edit?html,css,js,output

Answer

Its not a good idea to use JavaScript for changing a lot of styles while you can do it with just css. You should only include one class on your .dropdown when it is active. Below is the sample code where I've moved all your styles to css:

$(document).ready(function(){
   $('div.dropdown').each(function() {
      var $dropdown = $(this);
      var $dropdownLink = $dropdown.find('.dropdown-link');
       
      $dropdownLink.click(function(e) {
        e.preventDefault();
        var currentBlock = $(this).closest('.dropdown');
        
        if(currentBlock.hasClass('slide-active')) {
           currentBlock.removeClass('slide-active');
        } else {
           $('div.dropdown').removeClass('slide-active');
           currentBlock.addClass('slide-active');
        }
      });
   });
});
.dropdown-link {
  background: #54585a;
}
.dropdown-container {
  display: none;
}

.slide-active .dropdown-container {
  display: block;
}

.slide-active .dropdown-link {
  border-bottom: 1px dotted white;
  background: #4b4e50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dropdown">
  <div class="style1 dropdown-link">Timecard Error Message</div>
  <div class="style2 dropdown-container">
    <div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!
      </p>
    </div>
  </div>
</div>
<div class="dropdown">
  <div class="style1 dropdown-link">Worklist Emails</div>
  <div class="style2 dropdown-container">
    <div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!

    </div>
  </div>
</div>
<div class="dropdown">
  <div class="style1 dropdown-link">Unable to Enter a Future Timecard</div>
  <div class="style2 dropdown-container">
    <div class="ExternalClassD8605E4C12364C5685331D8368E84E8A">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam!

    </div>
  </div>
</div>