Question

I have this code in html:

<div id="menu">
    <div id="memberDetails"><h3><span>Welcome,</span><br /> <em>John Doe</em></h3>        </div>
            <ul>
                    <li class="active"><a href="#home" class="contentLink">Home <span class="icon"></span></a></li>
                    <li><a href="#email" class="contentLink">Email<span class="icon"></span></a></li>
                    <li><a href="#sns" class="contentLink">Social Networking<span class="icon"></span></a></li>
                    <li><a href="#promos" class="contentLink">Promos<span class="icon"></span></a></li>
                    <li><a href="#rewards" class="contentLink">Rewards<span class="icon"></span></a></li>
            </ul>
</div>
  <div id="email-menu" style='display:none'>
        <div id="email-memberDetails"><h3><span>Welcome,</span><br /> <em>Another Menu</em></h3>        </div>
            <ul>
                    <li><a href="#all" class="contentLink">All <span class="icon"></span></a></li>
                    <li><a href="#yahoo" class="contentLink">Yahoo<span class="icon"></span></a></li>
                    <li><a href="#gmail" class="contentLink">Gmail<span class="icon"></span></a></li>
                    <li><a href="#hotmail" class="contentLink">Hotmail<span class="icon"></span></a></li>
            </ul>
</div>

My External Js code.

$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = true;
});


    $(function(){
            var menuStatus;


            // Show menu
            $("a.showMenu").click(function(){
                    if(menuStatus != true){             
                    $(".ui-page-active").animate({
                            marginLeft: "160px",
                      }, 300, function(){menuStatus = true});
                      return false;
                      } else {
                            $(".ui-page-active").animate({
                            marginLeft: "0px",
                      }, 300, function(){menuStatus = false});
                            return false;
                      }
            });

            $('div[data-role="page"]').live('pagebeforeshow',function(event, ui){
                    menuStatus = false;
                    $(".pages").css("margin-left","0");
            });

            // Menu behaviour
            $("#menu li a").click(function(){
                    var p = $(this).parent();
                    if($(p).hasClass('active')){
                            $("#menu li").removeClass('active');
                    } else {
                            $("#menu li").removeClass('active');
                            $(p).addClass('active');

                    }
            });

            // Tabs 
            $('div[data-role="navbar"] a').live('click', function () {
                    $(this).addClass('ui-btn-active');
                    $('div.content_div').hide();
                    $('div#' + $(this).attr('data-href')).show();
            });

});

In my above code, I have two div which contain two different ul li contents. Now what I want to do is when in the link <li><a href='#email'> is click/active it will hide the <div id='menu'></div> and now show the <div id='email-menu'></div>. How can I do this in jquery? How can I determine if the email link is active?

Answer 1

Use the following code: http://jsfiddle.net/7W8a6/

$("a").click(function() {
  var thiz = $(this);
  // hide all menu that ends with 'menu'
  $("div[id$=menu]").hide();
  // show [clicked id]-menu element
  $(thiz.attr("href") + "-menu").show();
});