Show one div hide others using jquery

Question

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?

I don't quite understand what you want? The code is working - so what do you want to add? If you add colour to the div, it will be like facebook, I don't think I understand... Here's a [fiddle](http://jsfiddle.net/5rskoxzb/) with your code in it. please edit and tell us what you want — ᔕᖺᘎᕊ, Jan 03 '15 at 10:54
Please create a fiddle with jsfiddle. So we can understand what do you want. — Manoj, Jan 03 '15 at 10:55
Hi.. here is the demo: http://demos.9lessons.info/notifications_css/index.html# What i want is just when you click on link1 notification will popup.. if you click on link2 notification will popup again. if you click on the document notification will close — Mensur, Jan 03 '15 at 11:05
So, you want link1, link2 to open the same notification, and document to close notification? If so, your code is working already! — ᔕᖺᘎᕊ, Jan 03 '15 at 11:11
Hi: Here is my fiddle: http://jsfiddle.net/3ho7ommm/ So if you click on link1: it will show the notification with text "Show me the money" So what i would like to do now is when you click on Link2, to show the other notification with ola la la content instead and close the previous popup. — Mensur, Jan 03 '15 at 11:25
http://jsfiddle.net/dbuwy11a/1/ .Hi there, this might give you a hint — ℛⱥℐℰşℎ, Jan 03 '15 at 11:30

score 1 · Accepted Answer · answered Jan 03 '15 at 16:20

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 :)

Hey, Thank you so much for the solution!! Your proposed solution in this fiddle http://jsfiddle.net/abLku7e1/, doesnt go away when clicked outside the notification. Could you add that code as well? — Mensur, Jan 03 '15 at 17:47
I would use something like this: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it to do that. $(document).click() like you used previously would hide the dropdown if you click it. I updated my fiddle: http://jsfiddle.net/abLku7e1/1/ — Andy Mardell, Jan 03 '15 at 17:51

Show one div hide others using jquery

1 Answers1