jquery टॉगल स्लाइडअप/स्लाइडडाउन

Question

मुझे एक div # आइटम मिल गया है और यदि यह क्लिक किया गया है तो div # विकल्प slideDown()। यदि यह फिर से क्लिक किया गया है तो div # विकल्प स्लाइडअप() होना चाहिए; अगर विकल्प पहले से नीचे या ऊपर है तो मैं कैसे परीक्षण कर सकता हूं? मुझे पता है कि जब भी div # आइटम्स क्लिक किया जाता है, तो मैं एक चर में स्टोर कर सकता हूं और इसके मान को टॉगल कर सकता हूं, लेकिन क्या होगा यदि #choices अन्य माध्यमों से नीचे गिर गया है?

Answer 1

उपयोग .slideToggle()

Answer 2

Marimuthu's answer के रूप में अंक बाहर, आप slideToggle() का उपयोग स्लाइड करने के लिए करता है, तो div पहले से खुला है, या नीचे अगर यह बंद है सकते हैं।

आप यह देखने के लिए display संपत्ति भी देख सकते हैं कि यह वर्तमान में दिखाई दे रहा है या नहीं। स्लाइडअप() के लिए jQuery दस्तावेज़ों से।

एक बार ऊंचाई 0 तक पहुंचने के बाद, डिस्प्ले स्टाइल प्रॉपर्टी को यह सुनिश्चित करने के लिए सेट किया जाता है कि तत्व पृष्ठ के लेआउट को अब प्रभावित नहीं करेगा।

यह जानकर, आप को देखने के लिए जाँच कर सकते हैं अगर यह "कोई नहीं" के लिए सेट है:

var $choices = $('div#choices'); 
if ($choices.css("display") == "none") 
    $choices.slideDown(); 
else 
    $choices.slideUp(); 

Answer 3

इस प्रयास करें -

HTML:

<a href="#demo" class="nav-toggle">Show</a> 
<div id="demo" style="display:none;"> 
<p>short info</p> 
</div> 

jQuery स्क्रिप्ट:

$('.nav-toggle').click(function(){ 
    var content_id = $(this).attr('href');    
    var toggle_switch = $(this); 
    $(content_id).toggle(function(){ 
    if($(this).css('display')=='none'){ 
      toggle_switch.html('Show'); 
    }else{ 
     toggle_switch.html('Hide'); 
     } 
    }); 
});