How to check if two elements are toggled using Jquery?


Tags: jquery,css,toggle,visible

Problem :

I want to check if #kndpopup and #guildinfo elements are toggled, then after clicking #knd I want them both to go back to being untoggled.

Currently if I click #knd the #kndpopup toggles, then when I click #knd again the #kndpopup becomes untoggled, as intended. However, when I toggle #kndpopup and then toggle #guildinfo, which is an identical popup that sits over #kndpopup to hide it (like another page with information), I can't untoggle both #kndpopup and #guildinfo with the #knd button, it just toggles between them instead of closing them. How can I fix this? I have both elements set to display: none in the CSS.

JavaScript:

$("#knd").click(function() {
    $("#kndpopup").fadeToggle();

});

$(".info").click(function() {
    $("#kndpopup").fadeToggle();
    $("#guildinfo").fadeToggle();
});

EDITED CODE:

$("#knd").click(function() {
    $("#kndpopup").fadeToggle();

    if($('#guildinfo').is(':visible')){
        $("#guildinfo").fadeToggle();
}

This sorta works, but when #guildinfo is toggled and I click on #knd, it toggles back to #kndpopup when I click on #knd, how do I fix this?

3RD ATTEMPT:

$("#knd").click(function() {
    $("#kndpopup").fadeToggle();    

    if($("#guildinfo").is(':visible')){
        $("#guildinfo").fadeToggle();
    }

    else if($("#kndpopup").is(":hidden") && ("#guildinfo").is(":visible")) {
    return;
    }

});

It still doesn't work the way I want it to, please help.



Solution :

This answer does the trick:

$("#knd").click(function () {

    var KND = $("#kndpopup");
    var GUILDINFO = $("#guildinfo");

    if ((KND).is(':visible')) {
        $(KND).fadeOut();
    } 

    else if ((GUILDINFO).is(':visible')) {
        $(GUILDINFO).fadeOut();
        $(KND).fadeOut();
    } 

    else {
        $(KND).fadeIn();
    }

});

$(".info").click(function () {
    $("#kndpopup").fadeToggle();
    $("#guildinfo").fadeToggle();
});

    CSS Howto..

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    element doesn't show padding in Opera, Safari, IE

    How can I center div, inside other div with bootstrap classes?

    How to fade out after hover is done using CSS

    How to use an existing source map to compile scss to css?

    how to create table grid view fix header with long title name using only CSS?

    How to write many functions in one JS function

    Python: How to override text area in form using CSS

    ExtJS how to set button css by using pressedCls config

    How to “crop” a rectangular image into a square with CSS?

    how to affect an element's width by one child element but not others using CSS

    How to protect my injected elements CSS?

    Why doesn't this site have a Google logo for their use of Google Maps? I want to do this. How? [closed]

    How to achieve this header with html and css?

    css how to depend one div to another one in auto adjusting width

    How Do I Make Large Quotation Marks Wrap Properly Around Quotations?

    How to avoid double borders on list of divs

    How to center hgroup in css

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    How to create a sliding navigation with either jquery or css? [closed]

    How to apply CSS styles only to the text-content of a block-level element?

    How to make a different background for each link from a navbar? [closed]

    How to create a level 4 submenu with this css?

    Trying to incorperate a really simple light box. How do I stay centered on scroll?

    How can I stop my cursor changing to a vertical arrow over text?

    CSS selectors: how to make element hovering change wrapper's style

    How to set an image when we select its sub menu

    HTML CSS How to stop a table to put the content after it on a new line?

    how to center UL in my page?

    How to set one CSS rule for two tags?