Question

I’m trying to make a show/hide content feature work on my page:

<div>
    <div class="t">             
        <h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
    </div>

    <section class="title1 title">
        <div class="cat">
            <p>Category 1<span>This is the first category</p>
        </div>

        <div class="cat">
            <p>Category 2<span>This is the second category</p>
        </div>

        <div class="cat">
            <p>Category 3<span>This is the third category</p>
        </div>
    </section>
</div>

I think I’ve kept it pretty simple. Basically, for each section, this markup is going to be repeated. When you click on the link, jquery should show/hide the section that is on peer level with the link’s container div.

Here’s what I’ve got. It doesn’t produce any errors, but it also doesn’t hide the sections. It does, however, change the link’s text:

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

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

I think I might be missing something fundamentally important here, so if anyone can help me figure out what I’m doing wrong, your help will be greatly appreciated.

TIA 🙂

Answer 1

Not sure why you’re using .each(), something like this should work:

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

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