web-dev-qa-db-ja.com

jQuery UI Accordionすべて展開/折りたたみ

プロジェクトで jQuery UI Accordion （一度に複数のアイテムを開くことはできません）を使用しています。私は通常do一度に1つのパネルだけを開きたいので、アコーディオンの使用が適切です。

ただし、クリックすると「すべて折りたたむ」に切り替わる「すべて展開」リンクを提供する必要があります。この1つの要件についてほぼ同一のアコーディオン機能をカスタムで書きたくないので、アコーディオンコンポーネントを使用したままでこれを実現するJSが欲しいのです。

質問：jQuery UI「アコーディオン」コンポーネントを使用して標準機能を強化しながら、これを達成するにはどのJavaScript/jQueryが必要ですか？

ここにフィドルがあります： http://jsfiddle.net/alecrust/a6Cu7/

javascriptjqueryjquery-uiaccordionjquery-ui-accordion
32
AlecRust

最終的に、要件を考慮するとこれが最良のソリューションであることがわかりました。

// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
    $(this).toggleClass('collapse');
    return false;
});

更新されたJSFiddleリンク： http://jsfiddle.net/ccollins1544/r8j105de/4/

5
AlecRust

説明したように jQuery UIフォーラムでは、これにアコーディオンを使用しないでください。

アコーディオンのように見えて動作するものが必要な場合は、それで問題ありません。クラスを使用してスタイルを設定し、必要な機能を実装します。次に、ボタンを追加してすべてを開いたり閉じたりするのは簡単です。 例

[〜＃〜] html [〜＃〜]

Jquery-uiクラスを使用することにより、アコーディオンを「実際の」アコーディオンのように保ちます。

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 1
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        Content 1
    </div>
</div>​

自分のアコーディオンを巻く

ほとんどの場合、アコーディオンヘッダーで次の兄弟の状態を切り替える必要があります。これはコンテンツ領域です。また、後で表示する2つのカスタムイベント「show」と「hide」を追加しました。

var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');

headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');

    // open or close as necessary
    panel[isOpen? 'slideUp': 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen? 'hide': 'show');

    // stop the link from causing a pagescroll
    return false;
});

すべて展開/折りたたむ

ブールisAllOpenフラグを使用して、ボタンが変更されたことをマークします。これは、簡単にクラス、またはより大きなプラグインフレームワークの状態変数である可能性があります。

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

「すべて開いている」ときにボタンを入れ替える

カスタムの「表示」イベントと「非表示」イベントのおかげで、パネルが変更されたときに耳を傾けることができます。唯一の特別な場合は、「すべて開いている」、はいの場合はボタンを「すべて折りたたむ」、そうでない場合は「すべて展開する」です。

contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open, swap the button to collapser
    show: function(){
        var isAllOpen = !contentAreas.is(':hidden');   
        if(isAllOpen){
            expandLink.text('Collapse All')
                .data('isAllOpen', true);
        }
    },
    // whenever we close a panel, check to see if they're all open
    // if not all open, swap the button to expander
    hide: function(){
        var isAllOpen = !contentAreas.is(':hidden');
        if(!isAllOpen){
            expandLink.text('Expand all')
            .data('isAllOpen', false);
        } 
    }
});​

コメントの編集：「すべて展開」ボタンを押さない限り、「1パネルのみを開く」を維持する方が実際にはずっと簡単です。 例

50
Sinetheta

この私のソリューション：

実際のプロジェクトでの作業。

   $(function () {
    $("#accordion").accordion({collapsible:true, active:false});
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
        $(this).hide();
        $('.close').show();
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
        $(this).hide();
        $('.open').show();
    });
    $('.ui-accordion-header').click(function () {
        $('.open').show();
        $('.close').show();
    });
});

http://jsfiddle.net/bigvax/hEApL/

18
bigvax

これらの多くは複雑すぎるようです。私はちょうど次のことで望みを達成しました：

$(".ui-accordion-content").show();

JSFiddle

16
Charles Clayton

アコーディオンを使用してこれを行うことができるとは思わないただし、アコーディオンを再実装したくないと言っても、複雑さを見積もることが多いかもしれません。

要素の垂直スタックがある次のシナリオを検討してください。

_++++++++++++++++++++
+     Header 1     +
++++++++++++++++++++
+                  +
+      Item 1      +
+                  +
++++++++++++++++++++
+     Header 2     +
++++++++++++++++++++
+                  +
+      Item 2      +
+                  +
++++++++++++++++++++
_

怠け者の場合は、テーブルを使用してこれを作成できます。それ以外の場合は、適切なスタイルのDIVも機能します。

各アイテムブロックは、itemBlockのクラスを持つことができます。ヘッダーをクリックすると、クラスitemBlockのすべての要素が非表示になります（$(".itemBlock").hide()）。その後、jquery slideDown()関数を使用して、ヘッダーの下のアイテムを展開できます。これで、アコーディオンをほぼ実装できました。

すべてのアイテムを展開するには、$(".itemBlock").show()を使用するか、アニメーション化する場合は$(".itemBlock").slideDown(500)を使用します。すべてのアイテムを非表示にするには、$(".itemBlock").hide()を使用します。

3
PhilDin

Sinetheta によるコードをjQueryプラグインに変換します。以下のコードをjsファイルに保存します。

$.fn.collapsible = function() {
    $(this).addClass("ui-accordion ui-widget ui-helper-reset");
    var headers = $(this).children("h3");
    headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
    headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
    headers.click(function() {
        var header = $(this);
        var panel = $(this).next();
        var isOpen = panel.is(":visible");
        if(isOpen)  {
            panel.slideUp("fast", function() {
                panel.hide();
                header.removeClass("ui-state-active")
                    .addClass("ui-state-default")
                    .children("span").removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-triangle-1-e");
          });
        }
        else {
            panel.slideDown("fast", function() {
                panel.show();
                header.removeClass("ui-state-default")
                    .addClass("ui-state-active")
                    .children("span").removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-triangle-1-s");
          });
        }
    });
};

UIページでそれを参照し、jQuery accordian呼び出しと同様の呼び出しを行います。

$("#accordion").collapsible();

見た目がすっきりし、マークアップにクラスが追加されるのを防ぎます。

2
Ullas Antony

これを試してみてください jquery-multi-open-accordion

1
rajesh kakawat

2番目にbigvaxのコメントを前に追加しましたが、必ず追加する必要があります

        jQuery("#jQueryUIAccordion").({ active: false,
                              collapsible: true });

そうしないと、最初のアコーディオンを折りたたんで開くことができなくなります。

    $('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
    $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
   }
1
craig_nelson

AlecRustのソリューションは非常に有用であることがわかりましたが、1つの問題を解決するために何かを追加します。1つのアコーディオンをクリックして展開し、ボタンをクリックして展開すると、それらはすべて開かれます。ただし、ボタンを再度クリックして折りたたむと、単一のアコーディオンが展開する前に折りたたまれません。

ImageButtonを使用しましたが、そのロジックをボタンに適用することもできます。

/*** Expand all ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();

    return false;
});

/*** Collapse all ***/
$(".collapseAll").click(function (event) {
    $('.accordion').accordion({
        collapsible: true,
        active: false
    });

    $('.accordion .ui-accordion-header').next().slideUp();

    return false;
});

また、アコーディオン内にアコーディオンがあり、その2番目のレベルでのみすべてを展開する場合、クエリを追加できます。

/*** Expand all Second Level ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();

    return false;
});
0
Freelex

Taifunの例を使用して、展開と折りたたみができるように変更しました。

... //展開/折りたたみすべてを接続する

var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});
0
NCR

この軽量の小さなプラグインを試すことができます。

必要に応じてカスタマイズできます。展開/折りたたみ機能があります。

URL：http://accordion-cd.blogspot.com/

0
Dharam Mali
Yes, it is possible. Put all div in separate accordion class as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

        $(function () {
            $("input[type=submit], button")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
            $("#tabs").tabs();
            $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0



            });
        });

function expandAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0

            });

            return false;   
}

function collapseAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: false



            });
            return false;
}
</script>



<div class="accordion">
  <h3>Toggle 1</h3>
  <div >
    <p>text1.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 2</h3>
  <div >
    <p>text2.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 3</h3>
  <div >
    <p>text3.</p>
  </div>
</div>
0
Manish Ojha