Question

I have most of this working – the sections expand when clicking a heading (for example, Business Jet Traveler). What I am struggling with is this – when you expand a different section, THEN click on one of the sub-links, I want the OTHER section – the one you were just in – to collapse and become inactive (no light-colored background). Does this make sense?

http://jsfiddle.net/velcrobots/B6d35/

I’m trying to use closest() and siblings() but I guess I’m missing something. Any ideas?

HTML:

<div id="mk-menu">

        <div class="mk-ribbon"></div>

        <h1><?php print $yr; ?><br/>Media Kits</h1>
        <h2>Advertise With AIN</h2>            

    <div><!-- wrapper to separate menu items for jquery -->

        <div class="mk-menu-item">
            <a class="menu-head" id="ain-menu">Aviation International News</a>
            <ul id="ain-menu-sub" class="mk-submenu">
                <li><a href="#" name="ain-cal">Calendar</a></li>
                <li><a href="#" name="ain-rates">Print Rates</a></li>
                <li><a href="#" name="ain-orates">Online Rates</a></li>
                <li><a href="#" name="ain-specs">Print Specs</a></li>
                <li><a href="#" name="ain-ospecs">Online Specs</a></li>
            </ul>            
        </div>

        <div class="mk-menu-item">
            <a class="menu-head" id="bjt-menu">Business Jet Traveler</a>
            <ul id="bjt-menu-sub" class="mk-submenu">
                <li><a href="#" name="bjt-cal">Calendar</a></li>
                <li><a href="#" name="bjt-rates">Print Rates</a></li>
                <li><a href="#" name="bjt-orates">Online Rates</a></li>
                <li><a href="#" name="bjt-specs">Print Specs</a></li>
                <li><a href="#" name="bjt-ospecs">Online Specs</a></li>
            </ul>            
        </div>

        <div class="mk-menu-item">
            <a class="menu-head" id="cnd-menu">Convention News<br/>Daily Editions</a>
            <ul id="cnd-menu-sub" class="mk-submenu">
                <li><a href="#" name="cnd-cal">Calendar</a></li>
                <li><a href="#" name="cnd-rates">Print Rates</a></li>
                <li><a href="#" name="cnd-orates">Online Rates</a></li>
                <li><a href="#" name="cnd-specs">Print Specs</a></li>
                <li><a href="#" name="cnd-ospecs">Online Specs</a></li>
            </ul>            
        </div>

        <div class="mk-menu-item">
            <a class="menu-head" id="and-menu">Airshow News<br/>Daily Editions</a>
            <ul id="and-menu-sub" class="mk-submenu">
                <li><a href="#" name="and-cal">Calendar</a></li>
                <li><a href="#" name="and-rates">Print Rates</a></li>
                <li><a href="#" name="and-orates">Online Rates</a></li>
                <li><a href="#" name="and-specs">Print Specs</a></li>
                <li><a href="#" name="and-ospecs">Online Specs</a></li>
            </ul>            
        </div>

        <div class="mk-menu-item">
            <a class="menu-head" id="enews-menu">Emailed Newsletters</a>
            <ul id="enews-menu-sub" class="mk-submenu">
                <li><a href="#" name="enews-rates">Rates</a></li>
                <li><a href="#" name="enews-specs">Specs</a></li>
            </ul>            
        </div>

      </div><!-- end wrapper div to separate for jquery -->  

        <div class="mk-ribbon-end"></div>

    </div><!-- end #mk-menu -->

CSS:

#mk-menu {color:#FFF; background:#556B80; float: left; margin-top: -39px; position: relative; width: 204px; font-family: Verdana,Geneva,sans-serif; padding-bottom:20px}
.mk-ribbon {height:18px; width:25px; background:url(http://www.ainonline.com/sites/all/themes/ain_core/images/mk-ribbon.png) no-repeat; position:absolute; right:-25px}
.mk-ribbon-end {width:204px; height:51px; background:url(http://www.ainonline.com/sites/all/themes/ain_core/images/mk-ribbon-end.png) no-repeat; position:absolute; bottom:-51px}
#mk-menu h1 {font-family: Georgia, "Times New Roman", Times, serif;border-bottom: 1px solid #FFF; font-size: 25px; font-weight: bold; line-height: 32px; margin: 40px 15px 0; text-align: center; text-transform: uppercase;}
#mk-menu h2 {font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px; margin: 6px 0 35px; text-align: center; text-transform: uppercase;}
a.menu-head {color: #FFF; display: block; font-size: 10px; margin: 10px 5px 0; padding: 5px; text-transform: uppercase; line-height:12px}
a.mk-selected, a.menu-head:hover {background: #6E8193; line-height:12px}
a.menu-head:hover {cursor:pointer; color:#FFF !important}
#mk-menu ul {font-size: 14px; margin: 10px 0 15px 60px;}
#mk-menu li {font-size: 12px; line-height: 16px;}
#mk-menu li a {color:#FFF; text-decoration:none}
#mk-menu li:hover, #mk-menu li a:hover, #mk-menu li.active {list-style:disc; font-weight:bold; color:#FFF !important}
.mk-submenu {display:none}

jQuery:

jQuery(document).ready(function(){

jQuery(".menu-head").click(function (a) {
    var myid = jQuery(this).attr("id");
    jQuery("#"+myid+"-sub").slideToggle(100);
    jQuery(this).toggleClass("mk-selected");
    a.preventDefault();
    });

jQuery(".mk-submenu li").click(function (b) {
    jQuery(".mk-submenu li").removeClass("active");
    jQuery(this).addClass("active");
    b.preventDefault();
    });

jQuery(".mk-submenu li a").click(function (c) {
    jQuery(this).closest(".mk-menu-item").siblings().removeClass("mk-selected");
    var myname = jQuery(this).attr("name");
    jQuery(".mk-section").hide();
    jQuery("#"+myname).show();
    c.preventDefault();
    });

});

Answer 1

Change this –

jQuery(".mk-submenu li a").click(function (c) {
        var myname = jQuery(this).attr("name");
        jQuery(this).closest(".mk-menu-item").siblings().removeClass("mk-selected");
        jQuery(".mk-section").hide();
        jQuery("#"+myname).show();
        c.preventDefault();
        });

to this –

jQuery(".mk-submenu li a").click(function (c) {
        var myname = jQuery(this).attr("name");
        jQuery(this).parents('.mk-menu-item').siblings().find('.mk-submenu:visible').slideToggle();
        jQuery(".mk-section").hide();
        jQuery("#"+myname).show();
        c.preventDefault();

        });

http://jsfiddle.net/B6d35/8/