Sliding menu with hidden divs

StackOverflow https://stackoverflow.com/questions/22773236

Question

I have this code for simple Navigation menu that I am using on my website, all it does it show hidden div on the click, also checks if it was clicked already buy another button. Because I am not an expert in jQuery I would like some help to make my code more efficient.

Right now its the same code for two buttons which show some hidden divs, I would like to make it more unified that way if I add a new button I don't have to copy and paste same code with different IDs.

//Navigation menu

jQuery(function( $ ){
    // Get a reference to the container.
    var container = $( "#servicesSubMenu" );
    var container2 = $( "#productsSubMenu" );
    // Bind the link to toggle the slide.
    $( "#servicesMenu" ).click(
            function( event ){
                // Prevent the default event.
                event.preventDefault();
                // Toggle the slide based on its current
                // visibility.
                if (container.is( ":visible" )){
                    // Hide - slide up.
                    container.slideUp( 1100 );
                    jQuery("#servicesMenu").removeClass('current');
                }
                else if (container2.is( ":visible" )){
                    // Hide - slide up.
                    container2.slideUp( 20 );
                    jQuery("#productsMenu").removeClass('current');
                    container.slideDown( 20 );
                    jQuery("#servicesMenu").addClass('current');
                }                    
                else {
                    // Show - slide down.
                    container.slideDown( 1100 );
                    jQuery("#servicesMenu").addClass('current');

                }
            }
            );
    $( "#productsMenu" ).click(
            function( event ){
                // Prevent the default event.
                event.preventDefault();
                // Toggle the slide based on its current
                // visibility.
                if (container2.is( ":visible" )){
                    // Hide - slide up.
                    container2.slideUp( 1100 );
                    jQuery("#productsMenu").removeClass('current');
                } 
                else if (container.is( ":visible" )){
                    // Hide - slide up.
                    container.slideUp( 20 );
                    jQuery("#servicesMenu").removeClass('current');
                    container2.slideDown( 20 );
                    jQuery("#productsMenu").addClass('current');
                } 
                else {
                    // Show - slide down.
                    container2.slideDown( 1100 );
                    jQuery("#productsMenu").addClass('current');
                }
            }
            );

});

    // end navigation menu
<nav>
    <ul id="menu">
        <li><a href="#">Company</a></li>
        <li id="servicesMenu" class="dropDown"><a href="#">Services</a></li>
        <li id="productsMenu" class="dropDown"><a href="#">Products</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>  
<div id="servicesSubMenu" class="slideDown">
    <div class="shadow"></div>
        <ul class="sub-menu">
            <li><a href="#">Oil Change</a><a href="#">Powder Coating</a><a href="#">Welding</a></li>
        <li><a href="#">Installation</a><a href="#">Fender Rolling</a><a href="#">Machining</a></li>
        </ul>
    <div class="shadow_botm"></div>
</div>
<div id="productsSubMenu" class="slideDown">
    <div class="shadow"></div>
        <ul class="sub-menu">
            <li><a href="#">Coilovers</a><a href="#">Exhaust systems</a><a href="#">Rims</a></li>
        <li><a href="#">Turbo Kits</a><a href="#">Superchargers</a><a href="#">Misc</a></li>
        </ul>
    <div class="shadow_botm"></div>
</div>
Was it helpful?

Solution

If you're <div> containers are arranged accordingly to the menu buttons you can use the buttons index to target the corresponding container.

jQuery(function ($) {
    var containers = $('.slideDown');
    var menuBtns = $('.dropDown');

    menuBtns.click(function (event) {
        // Prevent the default event.
        event.preventDefault();
        //get the target container base on the clicked buttons index      
        var targetContainer = containers.eq($(this).index('.dropDown'));

        //show the target container and add class current
        targetContainer.slideDown(1100).addClass('current');

        //slideUp container that is not the target and remove current class
        containers.not(targetContainer).slideUp(1100).removeClass('current');
    });
});

See demo here: http://jsfiddle.net/hyTY8/

If you want the container to slideUp when you click on the same button twice, you can use slideToggle() instead of slideDown() . You can also toggle on the class current using toggleClass().

Updated fiddle: http://jsfiddle.net/hyTY8/2/

OTHER TIPS

I would recommend use of a jQuery library for this purpose, so that you'll get a clean an elegant menu. see

http://www.menucool.com/vertical/accordion-menu

http://jqueryui.com/accordion/

You can use them, and customize according to requirement.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top