CODEWITHSUNDEEP
javascriptjqueryhtmltogglehide
user3465990
user3465990

Reputation: 29

jQuery - how to hide an element if ANY of the activating elements are opened?

To further clarify this problem, here's the current situation: http://jsfiddle.net/Laqqw/1/

I need to hide the bottom element, when ANY of the navs are opened. And when all the navs are closed, the bottom element would show up again.

toggle() doesn't work, because it sometimes ends up not showing the bottom element when all the navs are closed. I tried using if else with no sensible results. Am I missing something here?

$(document).ready(function() {
    $("p").hide();
    $("h1, h2").click(function() {
      $(this).next().slideToggle(300);
      $("footer").toggle(300);
        $("#nav1, #nav2, #nav3").click(function() {
            $(this).data("clicked", true);
            if ($("#nav1, #nav2, #nav3").data("clicked")) {
                $("footer").hide(300);
            } else {
                $("footer").show(300);
            }
        });
    });
});

Upvotes: 0

Views: 127

Answers (2)

Uday
Uday

Reputation: 1

try like this:

$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
  $(this).next().slideToggle(300);
  $("footer").toggle(300);
    $("#nav1, #nav2, #nav3").click(function() {
        $(this).data("clicked", true);
        if ($("#nav1, #nav2, #nav3").data("clicked")) {
            $("#footer").hide(300);
        } else {
            $("#footer").show(300);
        }
    });
});

});

Upvotes: 0

user3497034
user3497034

Reputation:

Try this,

$(document).ready(function() {
    $("p").hide();
    $("h1, h2").click(function() {
        $(this).next().slideToggle(300, function(){
            if($("p:visible").length == 0)
                $("footer").show(300);
            else
                $("footer").hide(300);
        });
    }); 
});

Check jsfiddle

Upvotes: 4

Related Questions