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 to apply a CSS property to an element using it's CSS path in Javascript?

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to get the last Element of CSS?

    when we have a double border in a table , how do we fill in the gap beetween the two borders

    How to work with boxes? Html Css

    a div with height:1px appears very thicker in internet explorer 6. How to reduce it?

    How to convert from Powerpoint to HTML / CSS ? (FOSS)

    how to place div next to centered div css

    How to change value stylesheet_url in wordpress?

    How to center vertically child elements inside div [duplicate]

    How to move text using CSS animation?

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How do I design my CSS with ASP.NET MVC?

    show/hide multiple text field based on radio selection html javascript

    How to set the height with css to 100% and make it fluid?

    HTML with CSS: How to style font in a table?

    How can i have CSS3 animating menu like followbubble.com

    How to make these jquery pop ups fall back to css when javascript disabled

    How can I place html text on top of a canvas flot chart?

    how to get fixed header with css?

    How to do proportionate image gallery supporting both horizontal and vertical aspects?

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    How to move CSS inline with PreMailer.Net whilst using MvcMailer for sending HTML emails

    How to Show the Related Content in another Div when an Image Clicked

    How to use images for check boxes using CSS or may be Javascript?

    What's the proper way to name CSS selectors. It seems inconsistent how it works [duplicate]

    How to center the navigation on a drop down menu?

    HTML+Javascript: How can I Load Data in Div via Class?

    How does the CSS position on a div affects position of sibling division?

    How to apply different css margin-top to each children in a list