Reputation: 1534
I building simple accordion with jquery. I try with jquery .next() method but no luck, nothing happens on click. Should I go with another jquery method or I'm on right way, Have any idea? Here is my html:
<article class="TimBox">
<img src="/images/Tim01.jpg">
<div class="TimBoxTekst">
<h2>Title 1</h2>
<h3>Subtitle 1</h3>
<div class="LinkBox">
<a href="#">more<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="clear"></div>
<div class="TimBoxBio">Hidden text 1</div>
</article>
<article class="TimBox">
<img src="/images/Tim01.jpg">
<div class="TimBoxTekst">
<h2>Title 2</h2>
<h3>Subtitle 2</h3>
<div class="LinkBox">
<a href="#">more<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="clear"></div>
<div class="TimBoxBio">Hidden text 2</div>
</article>
And here is my jquery:
$(document).ready(function() {
$(".TimBox .LinkBox").click(function() {
if($(this).next(".TimBoxBio").is(":visible")){
$(this).next(".TimBoxBio").slideUp();
return false;
} else {
$(".TimBox .TimBoxBio").slideUp();
$(this).next(".TimBoxBio").slideToggle();
return false;
}
});
});
And here is css:
.TimBox .TimBoxBio{
position:relative;
display:none;
}
Upvotes: 1
Views: 178
Reputation: 1540
.next() is used to get the immediately following sibling. In your case, .TimBoxBio is not the next element relative to .LinkBox.
Try this:
$(document).ready(function() {
$(".TimBox .LinkBox").click(function() {
var $bio = $(this).closest('.TimBox').find('.TimBoxBio');
if($bio.is(":visible")){
$bio.slideUp();
return false;
} else {
$(".TimBox .TimBoxBio").slideUp();
$bio.slideToggle();
return false;
}
});
});
See working fiddle here: http://jsfiddle.net/dou457gk/
Upvotes: 1