jQuery - Accordian (De-Collapse)

Question

음,이 질문은 내 earlier question의 다음 버전입니다.

모든 링크가 축소되었으므로 버튼 하나를 만들거나 "모두 표시"라고 말하면 링크를 만들면 모든 링크가 아코디언으로 활성화됩니다. 즉 모든 링크의 데이터를보고 싶습니다. 또한 이전에 접힌 상태가 될 "모두 숨기기"라는 하나의 버튼 또는 링크를 만들어야합니다.

축소 된 상태로

+++++++++++++++++++++++++++++++++++++++ 
+ Link 1       + 
+ Link 2       + 
+ Link 3       + 
+ Link 4       + 
+++++++++++++++++++++++++++++++++++++++ 

"모두보기"를 클릭 한 후 얻을해야

+++++++++++++++++++++++++++++++++++++++ 
+ Link 1       + 
+  Link 1 line 1     + 
+  Link 1 line 2     + 
+  Link 1 line 3     + 
+ Link 2       + 
+  Link 2 line 1     + 
+  Link 2 line 2     + 
+  Link 2 line 3     + 
+ Link 3       + 
+  Link 3 line 1     + 
+  Link 3 line 2     + 
+ Link 4       + 
+  Link 4 line 1     + 
+  Link 4 line 2     + 
+++++++++++++++++++++++++++++++++++++++ 

이 어떻게 할까?

Answer 1

다음은 모든 컨텐츠 패널을 확장하고 축소하는 솔루션입니다. 당신이 그들 모두를 유지하려면

function expandAll() { 
    $('#accordion h3').removeClass('ui-state-default') 
     .addClass('ui-state-active') 
     .removeClass('ui-corner-all') 
     .addClass('ui-corner-top') 
     .attr('aria-expanded', 'true') 
     .attr('aria-selected', 'true') 
     .attr('tabIndex', 0) 
    .find('span.ui-icon') 
     .removeClass('ui-icon-triangle-1-e') 
     .addClass('ui-icon-triangle-1-s') 
    .closest('h3').next('div') 
     .show(); 

    $('.expand').text('collapse all').unbind('click').bind('click', collapseAll); 

    $('#accordion h3').bind('click.collapse', function() { 
     collapseAll(); 
     $(this).click(); 
    }); 
} 

function collapseAll() { 
    $('#accordion h3').unbind('click.collapse'); 

    $('#accordion h3').removeClass('ui-state-active') 
      .addClass('ui-state-default') 
      .removeClass('ui-corner-top') 
      .addClass('ui-corner-all') 
      .attr('aria-expanded', 'false') 
      .attr('aria-selected', 'false') 
      .attr('tabIndex', -1) 
     .find('span.ui-icon') 
      .removeClass('ui-icon-triangle-1-s') 
      .addClass('ui-icon-triangle-1-e') 
     .closest('h3').next('div') 
      .hide(); 

    $('.expand').text('expand all').unbind('click').bind('click', expandAll); 

    $('#accordion').accordion('destroy').accordion(); 
} 

와 바이올린

http://jsfiddle.net/wa9Dz/1/

Answer 2

해킹 (최후의 수단)를 사용하면

// highlight headers 
$("#accordion001").find('h3.ui-accordion-header') 
        .removeClass('ui-state-default') 
        .addClass('ui-state-active'); 

//open content panels 
$("#accordion001").find('div.ui-accordion-content') 
        .addClass('ui-accordion-content-active') 
        .show(); 

를 사용할 수 있습니다하지만 당신은뿐만 아니라 폐쇄를 처리해야하므로 현재 코드 놨 때문에 (우리가 무엇을했는지 취소) 기본 동작은 다음과 같습니다.