CODEWITHSUNDEEP
javascriptclasshtmlshow-hide
Denis S
Denis S

Reputation: 43

Show Hide All divs with same class at once Java Script

I'm not sure why, but it's works for me. Maybe I uploaded something wrong. JS Fiddle Link

JS Code

$("#toggle-content").click(function () {
    $(".otherContainers").slideToggle(500);
});

$("#closeImgPP").click(function () {
    $(this).parent().hide(500);
});

$("#closeImgPP2").click(function () {
    $(this).parent().hide(500);
});

$("#closeImgPP3").click(function () {
    $(this).parent().hide(500);
});

I have like 5 same divs, I close each one and for example I close only 3 out of 5 divs and when I use show/hide button it hides divs which are currently open and show divs which were hidden.

Question is how I can make show/hide button by clicking it will display everything and by clicking again hide everything, or like 2 different buttons one for showing and one for hiding

Upvotes: 0

Views: 1731

Answers (6)

kenn
kenn

Reputation: 1

$('#btns2').on('click', function() {
$('.chos').hide();
$('#icon3').hide();
$('#icon').show();
});

$('#btns').on('click', function() {
$('.chos').show();
$('#btns2').show();
$('#icon3').show();
$('#icon').hide();
});

in one button you can hide show or do toggle a div or selector using class/id at same time

Upvotes: 0

Raza
Raza

Reputation: 1095

Check this fiddle, FYI you forgot to include jquery library in your fiddle http://jsfiddle.net/DQ26M/11

$("#toggle-content").click(function () {
$(".otherContainers").slideUp(500);
$(".showContent").show();
});
$(".showContent").click(function () {
    $(this).hide(); $(".otherContainers").slideDown(500);
});

Upvotes: 0

AntouanK
AntouanK

Reputation: 4968

I guess you want something like this http://jsfiddle.net/blackjim/DQ26M/9/ you have to change your design a bit if you want to hide them all ( cause how will you show them again? )

$("#hide-content").click(function () {
    $(".otherContainers").hide(500);
});

$("#show-content").click(function () {
    $(".otherContainers").show(500);
});

$("#closeImgPP").click(function () {
    $(this).parent().hide(500);
});

edit: and maybe closeImgPP should be a class, if you want to have this close in every 'BLAHBLAH'

Upvotes: 0

Sergio
Sergio

Reputation: 28837

Your fiddle does not load jQuery. In the left corner, add a jQuery library. Check here: http://jsfiddle.net/DQ26M/7/

Can be good to add also some onLoad function on your website (jsfiddle does this for you). For example:

$(function(){ ... });

Upvotes: 0

Code Lღver
Code Lღver

Reputation: 15603

Use the below code to do so:

$("#toggle-content").click(function () {
    $.each($(".otherContainers"),function(){
         $(this).toggle(500);
    });
});

as you are using the selector by class name and in document it is multiple. so you need to apply the toggle to each one.

Upvotes: 0

Tim Baas
Tim Baas

Reputation: 6185

Use the .show() and .hide() methods instead of slideToggle

Upvotes: 1

Related Questions