¿Puedo expandir/contraer el contenido de JQuery ui Accordion al hacer clic también en otros elementos?

Question

De forma predeterminada, hay encabezados de contenido para controlar la expansión/colapso. Pero en mi situación, podría expandir/contraer los contenidos de otros elementos, también. Por ejemplo:

la estructura básica del código de 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> 

y ahora. Tengo otros elementos, al igual que:

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

muchas gracias !!

Answer 1

Puede usar .activate con falso pasado para colapsar todos los elementos programáticamente. Como solo tiene un elemento abierto a la vez, esto funcionará para colapsar cualquier elemento que esté abierto mostrando ese enlace. Esto solo funcionará si tiene collapsible establecido en true.

Puede pasar qué otro elemento desea expandir para expandir ese elemento al hacer clic.

Answer 2

Reducir pestaña acordeón:

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

Expand primera pestaña de acordeón:

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

Answer 3

I tenía problemas para conseguir los acordeones a colapsar/expandir después de que fueron inicialmente cargadas. Para evitar esto he utilizado:

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

... que imita clic en el área de encabezado y obligará a cambiar las clases de activación.

Me sentí como un truco, pero funcionó, mejor.

Answer 4

Después de la actualización de JQuery UI no hay un método "activo" en el acordeón. Por lo tanto, para contraer todos los acordeones utilizan:

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

Answer 5

Usando Bootstrap:

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

entonces se podría colapsar usando:

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