क्या मैं अन्य तत्वों पर क्लिक करके JQuery ui Accordion की सामग्री को विस्तार/संक्षिप्त कर सकता हूं?

Question

डिफ़ॉल्ट रूप से, विस्तार/पतन को नियंत्रित करने के लिए सामग्री के शीर्षलेख हैं। लेकिन मेरी स्थिति में, मैं अन्य तत्वों द्वारा सामग्री को विस्तार/संक्षिप्त भी कर सकता हूं। उदाहरण के लिए:

jQuery ui accodion कोड की बुनियादी संरचना:

<script> 
    $(function() { 
     $("#accordion").accordion(); 
    }); 
    </script> 



<div class="demo"> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
     <p> 
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
     </p> 
    </div> 
...... 
</div> 

और अब। मेरे पास एक और तत्व हैं, जैसे:

<ul id="another elements can expand/collapse too"> 
    <li><a href=""> expand/collapse contents of section1 of id=accordion too</a></li> 
........ 
</ul> 

आपको बहुत धन्यवाद !!

Answer 1

आप .activate का उपयोग कर प्रोग्राम के सभी तत्वों को ध्वस्त करने के लिए गलत रूप से पारित कर सकते हैं। चूंकि आपके पास एक समय में केवल एक तत्व खुलता है, यह उस लिंक को दिखाए जाने वाले तत्व को खोने के लिए काम करेगा। यह केवल तभी काम करेगा यदि आपके पास collapsibletrue पर सेट है।

आप उस तत्व को विस्तारित करने के लिए विस्तारित करना चाहते हैं, जिसे आप क्लिक करना चाहते हैं।

Answer 2

संक्षिप्त करें अकॉर्डियन टैब:

$('.accordion').accordion('activate', false); 

पहले अकॉर्डियन टैब का विस्तार करें:

$('.accordion').each(function (idx, item) { 
    if ($(item).accordion("option", "active") === false) { 
     $(item).accordion('activate', 0); 
    } 
}); 

Answer 3

मैं मुसीबत संक्षिप्त/विस्तृत डालने के बाद लोड किया गया करने के लिए Accordions हो रही थी करने के लिए। इस मैं इस्तेमाल किया चारों ओर पाने के लिए:

$('#accordionId h3').click(); 

... जो की नकल करता है हैडर क्षेत्र पर क्लिक करके सक्रियण वर्गों टॉगल बाध्य करेगा।

एक हैक की तरह महसूस किया, लेकिन यह काम किया है, बेस्ट।

Answer 4

JQuery UI के अद्यतन के बाद accordion पर कोई "सक्रिय" विधि नहीं है। सभी accordions तो, संक्षिप्त करने के लिए उपयोग करें:

$('.accordion').accordion('option', {active: false}); 

Answer 5

बूटस्ट्रैप का उपयोग करना:

//To Expand 
    var elem = $(this).find('.accordionElement'); 
    elem.addClass("in"); 
    elem.attr("style",""); 
    elem.attr("aria-expanded",true); 

तो आप का उपयोग कर ढह सकता है:

var elem = $(this).find('.accordionElement'); 
    elem.removeClass("in"); 
    elem.attr("style","height: 0px;"); 
    elem.attr("aria-expanded",false);