当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - 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

网友答案:

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'

网友答案:

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

网友答案:

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.

网友答案:

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(){ ... });
网友答案:

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);
});
网友答案:
$('#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

分享给朋友:
您可能感兴趣的文章:
随机阅读: