Czy mogę rozwinąć/zwinąć zawartość akordu JQuery ui, klikając również inne elementy?

Question

Domyślnie istnieją nagłówki treści do kontrolowania rozwijania/zwijania. W mojej sytuacji mogłem jednak rozwinąć/zwinąć zawartość także za pomocą innych elementów. Na przykład:

podstawowa struktura kodu 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> 

i teraz. Mam inne elementy, takie jak:

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

dziękuję bardzo !!

Answer 1

Możesz użyć .activate z fałszywym przekazaniem, aby programowo zwijać wszystkie elementy. Ponieważ masz tylko jeden element otwarty na raz, to będzie działać, aby zwinąć dowolny element jest otwarty, pokazując ten link. To zadziała tylko wtedy, gdy masz collapsible ustawiony na true.

Możesz podać inny element, który chcesz rozwinąć, aby rozwinąć ten element po kliknięciu.

Answer 2

Collapse tab akordeon:

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

Rozwiń zakładkę pierwszy akordeon:

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

Answer 3

I miał problemy z uzyskaniem Akordeony aby zwinąć/rozwinąć po ich początkowo załadowany. Aby obejść ten problem użyłem:

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

... który naśladuje kliknięciu na obszar nagłówka i zmusi przełączanie klas aktywacji.

Czułem się jak włamywacz, ale to działało, Najlepiej.

Answer 4

Po aktualizacji interfejsu JQuery nie ma "aktywnej" metody na akordeonie. Tak więc, aby zwinąć wszystkie akordeony użyć:

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

Answer 5

Korzystanie bootstrap:

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

następnie można zwinąć za pomocą:

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