jQuery सरल Collapsible Div?

Question

मैं उचित, सरल, छोटे निम्नलिखित बातें करने के लिए कोड रहा हूँ:

• यह लागू कक्षा के साथ तत्व पर क्लिक करें।

• DIV.CLASS - जो छुपा सामग्री दिखाता है और दिखाता है। (स्लाइडडाउन - टॉगल)

• DIV.CLASS - जो पहले शो सामग्री को ध्वस्त और छुपाता है। (SlideUp - टॉगल)

मैं एक jsFiddle यहाँ बनाया है: http://jsfiddle.net/Q4PUw/1/

तो अस्पष्ट और आसान होने के लिए, मैं कैसे एक div class छिपा और दृश्य पर एक तत्व एक बार बनने के लिए प्राप्त करने के लिए पता करने की जरूरत उसी पृष्ठ पर एक क्लास लागू होता है, जिसमें छिपे हुए और स्पष्ट HTML सामग्री को सक्रिय और निष्क्रिय कर दिया जाएगा। और मुझे इसे डिफ़ॉल्ट रूप से छिपाने की ज़रूरत है।

मैंने पूरे इंटरनेट पर देखा है और केवल जटिल जटिल लिपियों को पाया है, लेकिन कुछ भी आसान नहीं है। मुझे सरल Accordians मिल गया है ... लेकिन वे कभी नहीं बंद, वे सिर्फ एक और खोलें।

आप सभी की मदद के लिए धन्यवाद और मुझे आशा है कि मैं अन्य लोगों के बहुत सारे के लिए यह एक ही सवाल का जवाब देने में सक्षम हो सकता ...

नोट: मैं जानता हूँ कि बहुत कम जावास्क्रिप्ट और या यहाँ तक कि jQuery।

Answer 1

$('.expand-one').click(function(){ 
    $('.content-one').slideToggle('slow'); 
}); 

डेमो: http://jsfiddle.net/Q4PUw/2/

Answer 2

मैं इस पर देख रहा था और एक खुलने और बंधनेवाला div कि पहले से ही मेरे लिए स्टाइल गया था चाहता था। तब मुझे एहसास हुआ कि मैं क्या चाहता था एक एकल फलक jquery-ui accordion था।

<div id="collapse"> 
    <h3>Collapse and Expand</h3> 
    <div>Content</div> 
</div> 
<script> 
$("#collapse").accordion({ 
    collapsible: true, 
    active: false 
}); 
</script> 

http://jsfiddle.net/MB4ch/1/

Answer 3

मैं कई divs के साथ ऐसा करने के लिए, प्रत्येक अपने स्वयं के ट्रिगर के साथ करना चाहता था। हमें

एचटीएमएल

<div> 
    <p class="expand" id="expand-1">more 1...</p> 
</div> 
<div class="expandable" id="expandable-1"> 
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 
<div> 
    <p class="expand" id="expand-2">more 2...</p> 
</div> 
<div class="expandable" id="expandable-2"> 
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 

जावास्क्रिप्ट

$('.expand').click(function(){ 
    target_num = $(this).attr('id').split('-')[1]; 
    content_id = '#expandable-'.concat(target_num); 
    $(content_id).slideToggle('fast'); 
}); 

सीएसएस

.expand { 
    font-weight: bold; 
    font-style: italic; 
    font-size: 12px; 
    cursor: pointer; 
} 
.expandable { 
    display:none; 
} 
div { 
    margin: 10px; 
} 

https://jsfiddle.net/Q4PUw/3767/

Answer 4

बुरा विचार: उपरोक्त AlienWebguy के जवाब पर बिल्डिंग ई accordion। अपना खुद का ढहने वाला ब्लॉक बनाना बेहतर है।

उदाहरण:

function InitSpoilBlock(idClicked) 
    { 
     $(idClicked).on('click', function(e){ 
      var textArray = ['blind','slide'];//here you can add other effects 

      var randomEffect = textArray[Math.floor(Math.random()*textArray.length)]; 

      $(e.target).parent().children(".HiderPanel").toggle(randomEffect); 
     }); 
    } 

इसलिए जब आप इस तरह के एचटीएमएल लिखें:

<div class="HiderContainer"> 
    <a href="#" class="Hider">More</a> 
    <div class="HiderPanel"> 
     Spoiled block of html 
    </div> 
</div> 

और पृष्ठ लोड करने के बाद आप

InitSpoilBlock('.Hider'); 

फोन करेगा सभी ब्लॉक पतन के लिए और छिपाने के लिए संभव हो जाएगा यादृच्छिक एनीमेशन के साथ। या आप एक सटीक एनीमेशन का भी उपयोग कर सकते हैं।