Geek asks and answers

Hide divs when showing another - jQuery toggle

I will start with my JSFiddle example:

http://jsfiddle.net/CR5FB/5/

Basically, I am trying to get the same effect as on this post ( JSFiddle here ), however I have some problems with its implementation - since I want to check several switch statuses of a div, and not just switch between two divs. I tried using the following:

$("#showcreate").click(function() {
if ($(".searchmenu").is(":visible")) {
    $(".createmenu").toggle("fast");
    $(".searchmenu").toggle("fast");     
} else {
    $(".createmenu").toggle("fast");
});

(So, if the search menu is open, close it and open the creation menu, but if it does not open, just open the creation menu).

I'm not sure if the function applies :visibleif I used $("div").hide()instead of displaying: none in css?

- , jquery ..

+3
2

:

HTML:

<div class="actionsmenu" id="actionsmenu">
    <div id="navmenu">
        <ul id="navmenu">
            <li><a href='#' class="tog" data-id="createmenu" id='showcreate'>Create</a></li>
            <li><a href='#' class="tog" data-id="searchmenu" id='showsearch'>Search</a></li>
            <li><a href='#' class="tog" data-id="settingsmenu"  id='showsettings'>Settings</a></li>
            <li><a href='#' class="tog" data-id="helpmenu" id='showhelp'>Help</a></li>
        <ul>
    </div>
</div>
<div class="menu createmenu" id="createmenu">Menu 1</div>
<div class="menu searchmenu" id="searchmenu">Menu 2</div>
<div class="menu settingsmenu" id="settingsmenu">Menu 3</div>
<div class="menu helpmenu" id="helpmenu">

JS:

$(document).ready(function () {    
    $(".menu").hide();

    $(".tog").click(function () {    
        $(".menu").hide();
        $("." + $(this).data('id')).toggle("fast");
    });
});

FIDDLE:

http://jsfiddle.net/CR5FB/14/

EDIT:

div, .

: http://jsfiddle.net/CR5FB/19/

+1

JS: http://jsfiddle.net/7nGYE/

, CSS, , , div.

, :

$('ul#navmenu a').click(function() {
    $('div.active').removeClass('active').toggle('fast');
});

. :

$("#showcreate").click(function () {
    $(".createmenu").toggle("fast").addClass('active');
});

"" CSS, .

-1

More articles:


All Articles