アコーディオン (GUI)

アコーディオンは、ラベルやサムネイルなどのアイテムを垂直に積み重ねたリストで構成されるグラフィカル コントロール要素です。各アイテムは、「展開」または「折りたたみ」して、そのアイテムに関連付けられたコンテンツを表示できます。設定に応じて、展開されるアイテムは 0 個、1 個、または一度に展開されるアイテムは複数になります。

この用語は、蛇腹の一部を外側に引っ張ることで拡張できる 音楽用アコーディオンに由来しています。

アコーディオンの一般的な例は、ボックス領域の 表示/非表示操作ですが、リスト内に複数のセクションを持つように拡張されています。

アコーディオンは、タブ付きインターフェースと目的が似ており、1 つの項目がパネルに展開された項目のリストです(つまり、リスト項目は別のパネルにアクセスするためのショートカットです)。

いくつかのウィンドウが互いに積み重ねられています。それらはすべて「影付き」なので、キャプションのみが表示されます。それらの 1 つをクリックしてアクティブにすると、「影なし」または「最大化」になります。アコーディオン内の他のウィンドウは、上端または下端に配置されます。

GUI アコーディオンを使用する一般的な例は、ボックス領域の表示/非表示操作ですが、リスト内に複数のセクションを持つように拡張されています。

SlideVerseは、Webコンテンツへのアクセスを提供するアコーディオンインターフェースです。^[1]

Google Readerのリスト表示にもこの機能があります。

初期の例として、2008年にAppleのダウンロードページではロールオーバーアコーディオンが使用されていました。インターネットアーカイブのWayback Machineにキャプチャされたこの例では、ページの左側の列に、ロールオーバーすると展開される3つのカテゴリ、「すべてのダウンロード」、「トップAppleダウンロード」、「トップダウンロード」が含まれています。^[2]

• コード折りたたみ、テキストに適用される同様のテクニック

• jQuery UI アコーディオンウィジェット
• あなたの頭
• MONFX のmootools チュートリアル (エフェクトはスライド シェルフと呼ばれます)
• アコーディオン スクリプトのアコーディオン インターフェイス デモ