CODEWITHSUNDEEP
javascriptjqueryhtml
Duplo W
Duplo W

Reputation: 623

How to fadeOut() both elements that are visible when clicking a button again after making them fadeIn()?

HTML:

<div id="menu">
    <div id="img"></div>
    <div>Gallery</div>
    <div>Stats</div>
    <div>Members</div>
    <div id="groupme">GroupMe</div>
    <div id="knd">K&amp;D</div> <!-- When I click this "button", the id "#kndpopup" becomes visible. --> 
    <div>Apply</div>
</div>
<div class="popup" id="guildinfo"> <!-- this is the second element that is toggled when the user clicks on "guild info >>" (if you look under the list section) -->
    <span class="info">Back to wars >></span>
</div>
<div id="kndpopup" class="popup"> <!-- this is the first element that toggles -->
    <h3>Knights & Dragons - Wars</h3>
    <ul>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
    </ul>
    <span class="info">Guild info >></span> <!-- clicking on this toggles the second element. -->
    <span id="previous">
    <a href="previouswars.html">Click here to see all previous wars</a>
    </span>
</div>
<!--End of popupwarsdiv-->

JQUERY:

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

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

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

});

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

I want to fadeOut() both #kndpopup and #guildinfo when I click the button after both elements are visible, but when it's on the #guildinfo page and I click on the #knd button it goes back to the #kndpopup page and then I have to click the button again to close it. How to fix this?

Upvotes: 0

Views: 87

Answers (1)

John
John

Reputation: 1489

Ok all i understood was

but when it's on the #guildinfo page and I click on the #knd button it goes back to the #kndpopup page and then I have to click the button again to close it

Based on that 

  $("#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();
});

Is that what you are looking for? http://jsfiddle.net/58LYm/

Upvotes: 2

Related Questions