다른 요소를 클릭하여 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

false가 전달 된 .activate을 사용하면 모든 요소를 ​​프로그래밍 방식으로 축소 할 수 있습니다. 한 번에 하나의 요소 만 열려 있기 때문에 링크가 열려있는 요소가 무엇이든 축소 할 수 있습니다. 이는 collapsible이 true으로 설정된 경우에만 작동합니다.

확장 할 다른 요소를 전달하여 클릭시 해당 요소를 확장 할 수 있습니다.

Answer 2

축소 아코디언 탭 :

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

처음 아코디언 탭을 확장은 :

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

Answer 3

나는 문제가 처음로드 된 후 확대/축소하려면 아코디언을 받고 있었다합니다. 이 문제를 해결하기 위해 다음과 같이 사용했습니다.

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

... 헤더 영역을 클릭하면 활성화 클래스가 강제로 전환됩니다.

해킹처럼 느껴지지만, 가장 효과적입니다.

Answer 4

JQuery UI를 업데이트 한 후 아코디언에 대한 "활성"방법이 없습니다.

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

후 사용 무너질 수 : 부트 스트랩을 사용하여

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

Answer 5

: 그래서, 붕괴 모든 아코디언 사용

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