从菜单隐藏/显示多个div

Question

I have a simple mockup setup of a menu (mainnav) and when one of the menu items (menuitem) is clicked it shows a hidden div. The following works just fine, but I'm wondering if there's a way to combine some of the functions.

Here's my html:

<div id="mainnav">
<a class="menuitem" id="home" href="#">Home</a>
        <a class="menuitem" id="about" href="#">About</a>
        <a class="menuitem" id="contact" href="#">Contact</a>
</div>

<div id="maincontent">
<div id="slider1_container">
<p>SLIDESHOW_CODE</p>
</div>
<div id="content">
<p class="aboutcontent"><b>ABOUT:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="contactcontent"><b>CONTACT:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="findcontent"><b>FIND:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="find">
            <p><a href="#">Find...</a></p>
</div>
</div>

And here's the scripting:

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        $(".contactcontent").hide();
        $(".findcontent").hide();
        $("#slider1_container").hide();
        $(".aboutcontent").slideToggle();
    });
    $('#contact').click(function(){
        $(".aboutcontent").hide();
        $(".findcontent").hide();
        $("#slider1_container").hide();
        $(".contactcontent").slideToggle();
    });
    $('.find').click(function(){
        $(".aboutcontent").hide();
        $(".contactcontent").hide();
        $("#slider1_container").hide();
        $(".findcontent").slideToggle();
    });
    $('#home').click(function(){
        $(".aboutcontent").hide();
        $(".contactcontent").hide();
        $(".findcontent").hide();
        $("#slider1_container").slideToggle();
    });
});

Thanks!

Answer 1

Try like this:

 $(".findcontent,.contactcontent,#slider1_container").hide();

Here is the DEMO

Answer 2

You can at least combine the selectors:

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        $(".contactcontent, .findcontent, #slider1_container").hide();
        $(".aboutcontent").slideToggle();
    });
    $('#contact').click(function(){
        $(".aboutcontent, .findcontent, #slider1_container").hide();
        $(".contactcontent").slideToggle();
    });
    $('.find').click(function(){
        $(".aboutcontent, .contactcontent, #slider1_container").hide();
        $(".findcontent").slideToggle();
    });
    $('#home').click(function(){
        $(".aboutcontent, .contactcontent, .findcontent").hide();
        $("#slider1_container").slideToggle();
    });
});

Or, use a function for the shared code:

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        toggle(".contactcontent, .findcontent, #slider1_container", ".aboutcontent");
    });
    $('#contact').click(function(){
        toggle(".aboutcontent, .findcontent, #slider1_container", ".contactcontent");
    });
    $('.find').click(function(){
        toggle(".aboutcontent, .contactcontent, #slider1_container", ".findcontent");
    });
    $('#home').click(function(){
        toggle(".aboutcontent, .contactcontent, .findcontent", "#slider1_container");
    });
});

function toggle(hide, toggle){
    $(hide).hide();
    $(toggle).slideToggle();
}

Answer 3

You could try hiding them all every click and showing the only item you need.

Demo: http://jsfiddle.net/wsroet8u/

function HideThem(){
  $(".aboutcontent, .contactcontent, .findcontent, #slider1_container").hide();     
};   

HideThem();  
$("#slider1_container").show();  

$('#about').click(function(){
    HideThem();
    $(".aboutcontent").slideToggle();
});

$('#contact').click(function(){
    HideThem();
    $(".contactcontent").slideToggle();
});

$('.find').click(function(){
    HideThem();
    $(".findcontent").slideToggle();
});

$('#home').click(function(){
    HideThem();
    $("#slider1_container").slideToggle();    
});

Answer 4

As all of your 'content' suffixed elements are inside of #content then you can easily hide all of them by once using $('#content').children().hide(); or equal $('#content > *').hide();

All of you 'content' suffixed elements are unique, so why don't you use id instead of class ? Then on click you can show the element which link is targeting to:

HTML:

<a class="menuitem" id="about" href="#aboutcontent">About</a>
...
<p id="aboutcontent"><b>ABOUT:</b>Lorem ipsum dolor sit amet...</p>

JQuery:

$('#mainnav a, .find a').click(function () {
    $('#content').children().hide();
    $($(this).attr('href')).slideToggle();
});

JSFiddle DEMO

NOTE: If you don't want to use id s or/and change href then you can select targeted element like that: $('.'+$(this).attr('id')+content).slideToggle(); keeping your HTML as it is now.

UPDATE: I didn't realize that #slider1_container is outside #content , here is updated JSFiddle .

UPDATE 2: I added .not() function to do not hide actually targeted element so .slideToggle() now works fine - JSFiddle