Posso espandere/comprimere il contenuto di JQuery ui Fisarmonica facendo clic anche su altri elementi?

Question

Per impostazione predefinita, esistono intestazioni di contenuti per controllare l'espansione/compressione. Tuttavia, nella mia situazione, potrei espandere/comprimere il contenuto anche da altri elementi. Ad esempio:

la struttura di base del codice 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> 

e ora. Ho altri elementi, come:

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

grazie mille !!

Answer 1

È possibile utilizzare .activate con false passate per comprimere tutti gli elementi a livello di codice. Dal momento che hai sempre un elemento aperto alla volta, questo funzionerà per comprimere qualsiasi elemento aperto mostrando questo link. Funzionerà solo se hai collapsible impostato su true.

È possibile passare in quale altro elemento si desidera espandere per espandere quell'elemento al clic.

Answer 2

Collapse scheda fisarmonica:

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

espandere Primo scheda fisarmonica:

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

Answer 3

ho a avuto difficoltà a raggiungere le Fisarmoniche per comprimere/espandere dopo erano state caricate inizialmente. Per ovviare a questo ho usato:

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

... che imita cliccando l'area di intestazione e costringerà alternare le classi di attivazione.

Mi sono sentito come un hack, ma è quello che ha funzionato, Best.

Answer 4

Dopo l'aggiornamento dell'interfaccia utente di JQuery non è presente alcun metodo "attivo" su fisarmonica. Quindi, per comprimere tutte le fisarmoniche usano:

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

Answer 5

Utilizzando Bootstrap:

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

allora si potrebbe crollare utilizzando:

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