JQuery if / else with show/hide

Question

I have some divs (title). When I press, lets say div1, the subtitle shows. And when I press another div, lets say div2, then div1 hides, and div2 are being showed.

What I want, is when I press div1, and then press div1 again, it hides. You can see in the if/else statement what I've tried.

Hope someone can help me here.

$(document).ready(function()
{
    $(".title").click(function()
    {
        var $element = $(this);

        $(".open").removeClass("open");
        $('.subtitle').hide(500);

        $element.toggleClass('open');
        $element.children('.subtitle').toggle(500);

        if($(this).hasClass() == "open")
        {
            $element.children(".subtitle").hide(500);
        }
    });
});

Can you show the relevant HTML code as well? – yunzen Mar 07 '13 at 13:40 — yunzen, Mar 07 '13 at 13:40
can you create a demo at http://jsfiddle.net/ – Arun P Johny Mar 07 '13 at 13:41 — Arun P Johny, Mar 07 '13 at 13:41

score 1 · Accepted Answer · answered Mar 07 '13 at 13:41

1

$(this).hasClass() == "open" should be $(this).hasClass('open')

and inside the if shouldn't you show the subtitle instead of hiding it?

answered Mar 07 '13 at 13:41

David Fregoli

3,377
1
19
40

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

Toggle is the correct approach in this instance.

You might also want to check out this Visibility/Hidden info.

It covers how you could check for CSS visibility, CSS display, as well as actual element visibility. From those you can do any standard conditional statements depending on the "hiding" in question. Some may work better than others in certain circumstances.

edited May 23 '17 at 10:32

Community

1
1

answered Mar 07 '13 at 13:51

David R.

281
2
14

JQuery if / else with show/hide

2 Answers2