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.

@Jonathan79 to understand the problem as your code seems to be correct — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Sep 15, 2013 at 11:19
thanks guys for helping out. I see how jsfiddle can help, but for this problem, it was only about the jquery. Thanks again! — Jonathan 79
– Jonathan 79, Commented Sep 15, 2013 at 11:23

Jakub Kotrs · Accepted Answer · 2013-09-15 11:20:30Z

2

Use jQuery.toggle()

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

instead of jQuery.hide()

answered Sep 15, 2013 at 11:20

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S. S. Rawat · Accepted Answer · 2013-09-15 11:24:44Z

0

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

answered Sep 15, 2013 at 11:24

S. S. Rawat

6,1414 gold badges45 silver badges59 bronze badges

Comments

MrBlaise · Accepted Answer · 2013-09-15 11:28:22Z

0

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.

answered Sep 15, 2013 at 11:28

MrBlaise

1,06010 silver badges21 bronze badges

Comments

Amit Singh · Accepted Answer · 2013-09-15 11:30:03Z

0

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();
 });
});

answered Sep 15, 2013 at 11:30

Amit Singh

2,2754 gold badges27 silver badges50 bronze badges

Comments

paramjeet singh · Accepted Answer · 2013-09-15 11:41:57Z

0

Simplest choose toggle or toggle class

Fiddle

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

edited Sep 15, 2013 at 11:41

answered Sep 15, 2013 at 11:28

paramjeet singh

1651 silver badge10 bronze badges

Collectives™ on Stack Overflow

jQuery Show & Hide Toggle

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related