slideToggle not working for .sibling method

Question

I want to make hidden divs show when a title is clicked. I have chosen jQuery to do this with the slideToggle. I set the to have a class of "clicker-2", and the div is class "skill-talk_holder" that has the content is set to be hidden by CSS. There are multiple divs with the class of "skill-talk_holder" so I have to use something that will only open one at a time, and not all of them when "clicker-2" is clicked.

However, the only thing that happens is the page reloads (by just going to the top, not with a new HTTP req).

Here is my code:

<script type="text/javascript">

$(document).ready(function() {

    $('.clicker-2').click(function() {

        $(this).siblings('div').slideToggle("slow");

    });

});

</script>

And the HTML

<div class="divider">

    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>

</div>

<span class="spacer"></span>

<div class="skill-talk_holder">

    content content content

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Given your comments, you could use .nextAll()

$(document).ready(function() {
  
  $('.clicker-2').click(function(event) {
      event.preventDefault();
      $('.skill-talk_holder').slideUp('slow'); 
      $(this).parent().nextAll('.skill-talk_holder:eq(0)').slideToggle('slow');
  });
});

.skill-talk_holder {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

slideToggle not working for .sibling method

Sign up