jQuery Show＆Hide Toggle

Question

I have some divs that need to be hidden (class named .hideable), and some divs that need to be shown (class named .toggleable. I have it working so far, which is great, but I`m having difficulties with the following; The hidden divs (.hideable) need to come back after the toggleable divs are hidden again.

here is what I have:

jQuery(document).ready(function($) {
    var topContainer = $(".toggleable");
    var topButton = $(".orsp a");
    topButton.click(function() {
        topContainer.slideToggle('slow');
        $(".hideable").hide();
    });
});

all help is welcome! thanks, J.

Answer 1

Use jQuery.toggle()

$(".hideable").toggle();

instead of jQuery.hide()

Answer 2

I think you wnat try like this

HTML

<div style='display:none' class='hideable' >Hidden Div</div>
<div class='toggleable'>Toggleable div</div>

<input class='topButton' type='button' value='toggle'>

JS

$('.topButton').click(function() {
    $('.toggleable').slideToggle('slow', function() { $(".hideable").slideToggle(); });
});

Fiddle Here

Answer 3

If you don't want to use toggle to hide the .hideable div you can hide it using CSS and whenever you toggle .toggleable div you can check with Jquery whether it is hidden and if it is you can change it back to be shown. However Jakub's answer is the simplest solution.

Answer 4

Simplest choose toggle or toggle class

Fiddle

<http://jsfiddle.net/gcsHg/>?

Answer 5

jQuery(document).ready(function($) {
var topContainer = $(".toggleable");
var topButton = $(".orsp a");
topButton.toggle(function() {
    topContainer.slideToggle('slow');
    $(".hideable").hide();
},function () {
topContainer.slideToggle('slow');
    $(".toggleable").hide();
 });
});