jQuery click menu

Question

I'm working on this menu:

HTML:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->

<ul class="submenu submenu-1">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->

<div class="hero hero-1">content</div>
<div class="hero hero-2">content</div>
<div class="hero hero-3">content</div>
<div class="hero hero-4">content</div>

jQuery:

$('#menu li a').click(function () {
    $('#menu li').removeClass('active');
    $('.submenu, .hero').slideDown('normal');
});
$('.submenu, .hero').hide();

... it currently shows ALL submenus and hero divs. What I want is.. if its FIRST li of the #menu, it should look for submenu-1 and hero-1 and slidedown.

I'd really appreciate any help.

Thanks!

Answer 1

Add a data attribute to the original a items. (working sample - since no css was provided, the styles are not exactly right, but you get the idea).

<ul id="menu">
    <li><a href="#" data-slide="1">Item 1</a></li>
    <li><a href="#" data-slide="2">Item 2</a></li>
    <li><a href="#" data-slide="3">Item 3</a></li>
    <li><a href="#" data-slide="4">Item 4</a></li>
</ul><!-- end #menu -->

Then your JS can extract that ID in order to show the correct, associated sub menus and content.

$('#menu li a').click(function () {

    //Fetch the value of the 'slide' data attribute of the clicked link
    var id = $(this).data('slide'); 

    $('.submenu, .hero').hide();
    $('#menu li').removeClass('active');
    $('.submenu-'+id+', .hero-'+id).slideDown('normal');

});
$('.submenu, .hero').hide();

The benefit to using this method over some of the other methods mentioned (like .eq() or .index()) is that you can re-arrange the order of the original menu items and it will not throw off which content item gets pulled. So this HTML would still work perfectly...

<ul id="menu">
    <li><a href="#" data-slide="3">Item 3</a></li>
    <li><a href="#" data-slide="1">Item 1</a></li>
    <li><a href="#" data-slide="4">Item 4</a></li>
    <li><a href="#" data-slide="2">Item 2</a></li>
</ul><!-- end #menu -->