Javascript Question
slideToggle not working for .sibling method
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>
Answer
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>Source (Stackoverflow)