jakeinbake jakeinbake - 2 months ago 15
jQuery Question

slideToggle not expanding element

I'm using slideToggle() to expand elements in a panel. Upon clicking, the function does not expand said elements.

Here's the code:

HTML

<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title" style="text-align: center;"><a href='#' class="accordion-toggle">Risks</a></h6>
</div>
<div class="accordion-content" id="risks" style="height: 0;overflow: hidden;">
<div class="panel-body" style="text-align: center; font-size: 18px;">5.8%</div>
</div>
</div>


Javascript

(document).ready(function($) {
$('.accordion').find('.accordion-toggle').click(function(){

//Expand or collapse this panel
$(this).next().slideToggle('fast');

//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');

});
});

Answer

What I did is, going two layers up and then look for the requested element in the siblings of the parent-parent-element.

 $(document).ready(function(){
   $(".accordion-toggle").click(function(){
      $(".accordion-toggle").not(this).parent().parent().siblings(".accordion-content").slideUp();
      $(this).parent().parent().siblings(".accordion-content").slideToggle("fast");
   });
  });

I made a fiddle for you here: https://jsfiddle.net/aLedkzw6/1/

Made an edit. Here you go.