0

I've been working on some updates to my forum page category listing.

I've made extensive structural changes to make use of HTML5 and this has made it necessary to change the JQuery that shows/hides the categories per title.

Here's the new JQuery and HTML5 structure:

http://jsfiddle.net/LYoung/JLVEs/1/

<div class="t">
    <h2><a href="#" class="sh">-</a> Gaming</h2>
</div>
<section>
    <div class="cat">
        <p><a class="catlnk" href="display.php?cat=General-Gaming&page=1">General Gaming</a><span>No work here, just play!</span></p>
    </div>
    <div class="cat">
        <p><a class="catlnk" href="display.php?cat=World-of-Warcraft&page=1">World of Warcraft</a><span>WOW specific discussion. No other games please.</span></p>
    </div>
</section>

And the JQuery I'm using:

$(".sh").click(function() {
    var show = ($(this).text() === "+");

    if (show) {
        $(this).parent().parent("div").siblings("section").fadeIn(500);
    }
    else {
        $(this).parent().parent("div").siblings("section").fadeOut(500);
    }
    $(this).text(show ? "-" : "+");
});

The weird thing is that this works perfectly fine on the jsfiddle. It does exactly what I'm expecting it to do, but on my webpage, it shows/hides all the categories.

Can anyone help me to figure out why and offer a solution?

2 Answers 2

2

The problem is that your real page doesn't have the <div class="title"> which is wrapping the individual categories. So when you use the siblings method it is selecting every <section> tag in the list.

0
0

Instead of hiding all sibblings, you probably want to hide only the section following the div. And you don't need to use parent twice :

if (show) {
    $(this).closest("div").next("section").fadeIn(500); // if possible make the selector it more specific using "div.t"
} else {
    $(this).closest("div").next("section").fadeOut(500);
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.