jquery - タブ付きのjQuery接続アコーディオン

Question

アコーディオンを jQuery の公式デモhereと同様のタブに接続しますが、リストの代わりにアコーディオンを使用します...可能ですか? 誰かが私に実用的な例を提供できますか?

Answer 1

アコーディオンあります| jQuery UIのデモ。

使用すると、タブとアコーディオンを組み合わせることができるはずです

$(function() {
   $( "#tabs" ).tabs();
   $( "#accordion-1" ).accordion();
   $( "#accordion-2" ).accordion();
});

このようなHTML構造

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <div id="accordion-1">
            <h3>Section 1</h3>
            <div>
                <p>
                Tab 1 - Section 1
                </p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>
                Tab 1 - Section 2
                </p>
            </div>
        </div>
    </div>
    <div id="tabs-2">
        <div id="accordion-2">
            <h3>Section 1</h3>
            <div>
                <p>
                Tab 2 - Section 1
                </p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>
                Tab 2 - Section 2
                </p>
            </div>
        </div>
    </div>
</div>