CODEWITHSUNDEEP
javascriptjqueryhtml
Mensur
Mensur

Reputation: 475

Show one div hide others using jquery

I have downloaded some script for a notification menu Facebook notification menu and it works fine but what i would like to do is create another link so when you click on the link this current notification will close and the other one will be opened instead. And when you click on the document the notification will be closed as well (PS, this is working today in existing code)

It should work like facebook menu, when you click on friendrequest, messages, or your profile. 

<span class="menuoptions active">
    <div style="position: relative;">

        <div id="notification_li"></div>
        <a href="#" id="notificationLink">
            <div class="counter">22</div>
                Click here to show options
        </a>
        <div id="notificationContainer">
        <div id="notificationTitle">Messages</div>
        <div id="notificationsBody" class="notifications">
            Notification goes here
        </div>
        <div id="notificationFooter"><a href="#">See All</a></div>
        </div>


    </div>
</div>

The jquery code which is currently being used is:

$(document).ready(function()
{
   $("#notificationLink").click(function()
{
   $("#notificationContainer").fadeToggle(300);
   return false;
});

//Document Click
$(document).click(function()
{
  $("#notificationContainer").hide();
});

//Popup Click
$("#notificationContainer").click(function()
{
   return false
});

});

How should jquery look like to make this work?

Upvotes: 0

Views: 1253

Answers (1)

Andy Mardell
Andy Mardell

Reputation: 1191

See this updated fiddle of your version: http://jsfiddle.net/3ho7ommm/4/

The above does the following:

  • Shows #notificationContainer and hides #notificationContainer2 if it's open when you click Link 1
  • Shows #notificationContainer2 and hides #notificationContainer if it's open when you click Link 2
  • Hides both #notificationContainer and #notificationContainer2 when you click anywhere on the document (like you had already done)

A few problems though. You have too many ID's - you should be using classes for anything that appears on the page more than once (#notificationTitle, #notificationBody, #notificationFooter) and there are a few simpler, cleaner ways you could write the JS. Here's how I would do it:

HTML:

<div class="menu">
    <div class="link">
        <a href="#">Link 1</a>
        <div class="dropdown">
            Content for dropdown 1
        </div>
    </div>
    <div class="link">
        <a href="#">Link 2</a>
        <div class="dropdown">
            Content for dropdown 2
        </div>
    </div>
</div>

CSS:

.link {
    display: inline-block;
    position: relative;
    float: right;
}

.link a {
    padding: 10px;
}

.link .dropdown {
    display: none;
    position: absolute;
    top: 20px;
    right: 0px;
    color: white;
    background: #999;
    height: 200px;
    width: 200px;
    padding: 20px;
    border: 1px solid red;
}

jQuery:

// When .link a is clicked. You used .click(), I used .on("click")
$('.link a').on("click", function(e){
    // Prevent link being followed (you can use return false instead)
    e.preventDefault();
    // Hide all other .dropdown divs
    $(this).parent('.link').siblings().children('.dropdown').fadeOut();
    // Toggle current .dropdown
    $(this).siblings('.dropdown').fadeToggle();
});

Here's the working jsfiddle of my version: http://jsfiddle.net/abLku7e1/

Hope that helps :)

Upvotes: 1

Related Questions