छिपाएं, शो, छुपाएं/SHOWALL बटन

Question

यहाँ कोड:http://jsfiddle.net/t2nite/KCY8g/

मैं इन छुपा बक्से jQuery का उपयोग कर निर्माण कर रहा है।

प्रत्येक बॉक्स कुछ टेक्स्ट और एक "दिखाएं" और "छुपाएं" बटन है। मैं "सभी दिखाएं/छुपाएं" बटन बनाने की कोशिश कर रहा हूं।

लेकिन जब मैंने नीचे दिए गए कोड को आजमाया तो पूरा बटन गायब हो गया।

$("#btn").toggle(function() { 
    $(".para2, .para3, .para4").hide(200); 
    $(".para2, .para3, .para4").show(200); 
}); 

यह सबसे नज़दीकी है जो मैं चाहता हूं कि मैं प्राप्त कर सकूं।

$("#btn").click(function() { 
    $(".para2, .para3, .para4").toggle(200); 
}); 

शीर्ष कार्यों पर कोड, लेकिन छिपाने या दिखाने के बजाय सभी बक्से इसे छिपाने और दिखाने के बीच टॉगल करते हैं। मदद।

मैं केवल सामग्री छिपाना चाहता हूं और बटन पैरा कक्षाओं के अंदर नहीं हैं।

Answer 1

आपको प्रत्येक तत्व के माध्यम से लूप करने की आवश्यकता है ताकि यह जांच सके कि वे छिपाए गए हैं या नहीं। यह वास्तव में इस बात पर निर्भर करता है कि क्या आप उन्हें पहले छिपाना चाहते हैं या उन सभी को दिखाना चाहते हैं।

// To toggle each element's state 
$("#btn").click(function() { 
    $(".para2, .para3, .para4").each(function (index, element) { 
     if ($(this).is(':visible')) { 
      $(this).hide(200); 
     } else { 
      $(this).show(200); 
     } 
    }); 
}); 

// To show all and hide all afterwards or vice-versa (change the attr check) 
$("#btn").click(function() { 
    if ($(this).attr('data-show')) { 
     $(".para2, .para3, .para4").show(200); 
     $(this).attr('data-show', false); 
    } else { 
     $(".para2, .para3, .para4").hide(200); 
     $(this).attr('data-show', true); 
    } 
}); 

// To hide all if one is shown 
$("#btn").click(function() { 
    var oneShown = false; 
    $(".para2, .para3, .para4").each(function (index, element) { 
     if ($(this).is(':visible')) { 
      oneShown = true; 
     } 
    }); 
    if (oneShown) { 
     $(".para2, .para3, .para4").hide(200); 
    } else { 
     $(".para2, .para3, .para4").show(200); 
    } 
}); 

Answer 2

आप .toggleघटना में दोनों कॉलबैक का उपयोग करना चाहते: यहाँ आप क्या जरूरत है

$("#btn").toggle(function() { 
    $(".para2, .para3, .para4").hide(200); 
}, function() { 
    $(".para2, .para3, .para4").show(200); 
}); 

फिडल: http://jsfiddle.net/gromer/CDEMS/

मुझे लगता है कि तुम क्या करने की कोशिश कर रहे थे संभालने कर रहा हूँ टॉगल की तरह?

Answer 3

मुझे लगता है कि आप की जरूरत है इस:

$("#btn").data('tgl','hide').click(function() { 
    if ($(this).data('tgl') == 'hide') { 
     $(".para2, .para3, .para4").hide(200); 
     $(this).data('tgl','show'); 
    } else { 
     $(".para2, .para3, .para4").show(200); 
     $(this).data('tgl','hide'); 
    } 
}); 

demo

Answer 4

काम कर देखें मैं नहीं बल्कि विशिष्ट आईडी से तत्वों से कक्षाओं का उपयोग करने में कुछ परिवर्तन किए हैं, तो आप इस व्यवहार के आधार पर (इस प्रकार बना सकता है कम कोड की आवश्यकता है और itsawrap तत्वों को जोड़ने या निकालना आसान बनाता है)।

HTML:

<div id="showall"><button id="btn">HIDE/SHOW ALL</button></div> 


<div class="itsawrap"> 
    <button class="hide">HIDE</button> 
    <button class="show">SHOW</button> 
    <p class="para2">"Who you callin' pinhead?"</p> 
    <p id="btm" class="para2">- Patrick Star</p> 
</div> 

<div class="itsawrap"> 
    <button class="hide">HIDE</button> 
    <button class="show">SHOW</button> 
    <p class="para3">"He was a good man, what a rotten way to die."</p> 
    <p id="btm" class="para3">- JC Denton</p> 
</div> 

<div class="itsawrap"> 
    <button class="hide">HIDE</button> 
    <button class="show">SHOW</button> 
    <p class="para4">"Wooooooooo!!"</p> 
    <p id="btm" class="para4">- Ric Flair</p> 
</div> 

जे एस:

$("#btn") 
    .data('shown', true) 
    .click(function() { 
    var mode = $(this).data('shown') ? 'hide' : 'show'; 
    $('.itsawrap p')[mode](200); 
    $(this).data('shown', mode == 'show'); 
}); 

$('.itsawrap').on('click', '.hide', function() { 
    $(this).parent().find('p').hide(200); 
}).on('click', '.show', function() { 
    $(this).parent().find('p').show(200); 
}); 

jsFiddle

Answer 5

अपने कोड के सभी तीन घटनाओं यहाँ .. इस दृष्टिकोण की कोशिश करो के रूप में घनीभूत किया जा सकता है ..

$("#btn").toggle(function() { 
    $(".para2, .para3, .para4").hide(200); 
}, function() { 
    $(".para2, .para3, .para4").show(200); 
}); 

$("[id^='hide']").click(function() { 
    $(this).closest('div').find('p').hide(200); 
}); 

$("[id^='show']").click(function() { 
    $(this).closest('div').find('p').show(200); 
    $('.itsawrap').not($(this).closest('div')).find('p').hide(200); 
}); 

CHECK FIDDLE