ページに 4 つの個別の div(エリア) が必要です。これらの 4 つの領域のそれぞれにリストがあります。リストはアコーディオンである必要があります。デフォルトの h3 ヘッダーをトリガーとして使用しません。トリガーは、各リストのすぐ下にある「Expand +」というテキスト リンクである必要があります。
したがって、対応する div の [Expand+] をクリックすると、リストが表示されます。次に、「Expand+」が「Close-」に変わります
最初はすべてのアコーディオンを閉じる必要があります。
これはjqueryUIとアコーディオンで可能ですか?
はい、可能です。accordionドキュメントの次のオプションを参照してください。
active: 現在開いているパネル。activefalse に設定すると、すべてのパネルが折りたたまれます。これには、collapsibleオプションが true である必要があります。
header: ヘッダー要素のセレクターで.find()、メインのアコーディオン要素に適用されます。コンテンツ パネルは、関連するヘッダーの直後に兄弟である必要があります。
ただし、テキストの変更を処理するには、特注のコードを記述する必要があります。
例はここにあります: http://jsfiddle.net/GoranMottram/dP5mn/