Question

I have two dropdown hidden menus ie menu A and menu B that shows up when you click on link A and B respectively and vice versa and also disappears when u click anywhere in the body. The problem I have is when I click on link B whilst link A is still activated, menu A stays open instead of closing and this leads to many complications. Dunno what I am doing wrong.

you can view the code at jsFiddle demo

or here is the code am using;

html;

<ul>
<li id="tabs" class="notification">
<a>Click for Notification</a>
<div id="notification">
<h3>Your Notifications</h3>
<p>Notification #1</p>
<p>Notification #2</p>
<p>Notification #3</p>
<p>Notification #4</p>
<p>Notification #5</p>
<p>Notification #6</p>
</div>
</li>


<li id="tabs" class="latest">
<a>Click for Latest News</a>
<div id="latest">
<h3>Your Latest News</h3>
<p>News #1</p>
<p>News #2</p>
<p>News #3</p>
<p>Notification #4</p>
<p>News #5</p>
<p>News #6</p>
</div>
</li>
</ul>

jquery;

$(function() {
            $("li#tabs.notification a").click(function(e) {
                $("#notification").toggle().addClass("active");
                $('li#tabs a').removeClass('selected');
                $(this).addClass('selected');
                e.stopPropagation();
            });

            $(document).click(function(e) {
                $('#notification').hide().removeClass('active');
                $('li#tabs a').removeClass('selected');
            });

            $("#notification").click(function(e) {
                e.stopPropagation();
            });
        });


$(function() {
            $("li#tabs.latest a").click(function(e) {
                $("#latest").toggle().toggleClass("active");
                $('li#tabs a').removeClass('selected');
                $(this).addClass('selected');
                e.stopPropagation();
            });

            $(document).click(function(e) {
                $('#latest').hide().removeClass('active');
                $('li#tabs a').removeClass('selected');
            });

            $("#latest").click(function(e) {
                e.stopPropagation();
            });
        });

Answer 1

I think the problem is about displaying and hiding correct content.

$(function() {
        $("li#tabs.notification a").click(function(e) {
            $("#notification").toggle().toggleClass("active");
            $('#latest').hide();
            $('#notification').show();  
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#notification').hide().removeClass('active');
            $('#latest').hide();              
            $('li#tabs a').removeClass('selected');
        });

        $("#notification").click(function(e) {
            e.stopPropagation();
        });
    });


    $(function() {
        $("li#tabs.latest a").click(function(e) {
            $("#latest").toggle().toggleClass("active");
            $('#notification').hide();
            $('#latest').show();
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#latest').hide().removeClass('active');
            $('li#tabs a').removeClass('selected');
        });

        $("#latest").click(function(e) {
            e.stopPropagation();
        });
    });

I really suggest re-thinking the solution because if you get lots of tabs then you will end up having huge amount of duplicate code.

For example: when clicking the title it would display elements inside it and hide all the other elements. Then it would not have to know what is the Id of the div like it is now doing with #notification and #latest