Accordion（或Accordion菜單）指分組且可折疊的面板集，能在有限的空間裡提供大量鏈接或是其它可選擇的內容供訪問。
每個內嵌式面板有可能單獨展開（這時往往其它面板都會閉合），通常鼠標經過或是點擊特定面板的標題（或是面板上的展開/折疊元素），就會展開一組子選項。
解決了什麼問題？
如果想在有限的空間裡塞入大量內容，或是當內容一次性全部展示時會導致用戶無所適從時，問題就來了，怎樣才能以易於用戶理解的方式，讓用戶同時訪問大量內容，又不需要滾動頁面。滾動頁面會讓用戶離開他們更喜歡的上下文環境或是頁面位置。
什麼時候使用該模式？
當可選項非常多，空間又有限，而且內容列表可以有邏輯地分組為規模更小且尺寸相當的塊狀內容時。
解決方案是什麼？
提供兩級的選項集
Ÿ 第一級是分類或分組
Ÿ 第二級是各組內的選項列表
Accordion通常被設計為一些可折疊的面板（不是那種有層次的樹狀結構），第一級分類通常被用作標簽。分類標簽通常用作全長度的控制柄，或同時提供了相應的擴展/折疊圖標。Accordion通常默認會顯示一個初始面板。
建議
Ÿ 默認打開最重要的面板，這樣既是為了顯示最重要的選擇，同時也透露出這樣的一個事實，即每個折疊著的列表都是可以打開的。
Ÿ 高亮顯示當前打開的面板，這樣用戶可以把已打開面板的標題與關閉著的面板的標題區別開。
Ÿ 不要在Accordion裡再放置Accordion，如果你真的需要這樣做，考慮樹狀結構，或是其它更合適多級結構的元素更加合適。
選擇
Accordion可以配置為，要求至少打開一個面板，或是允許其它更靈活的模式，比如允許關閉所有面板、允許打開多個面板等。有些業內人士認為，只允許同時打開一個面板是最佳實踐，但也有不這樣認為。
Ÿ Accordion可以配置為一次只能打開一個面板，但在許多例子裡，它支持同時打開多個面板。
Ÿ 除非版面或是其它不可變更的設計限制要求Accordion保持大小一致，否則它應該可以改變尺寸以容納不同尺寸的面板。
Ÿ 在許多案例中，只有單擊才能打開Accordion裡的面板，但在有些上下文環境中，比如在展示“高興”/有趣/“嘿，來看看”這樣的元素時，鼠標經過時就展示面板也是可以的。
為什麼使用該模式？
首要原因是，使用Accordion元素可以在有限的空間裡塞入大量內容。
特殊用例
大多數Accordion是垂直排列的，但也有些是水平排列的。
可訪問性
對於鍵盤用戶來說，Accordion最後要麼像樹狀視圖要麼像標簽視圖。Accordion上有可能增加鍵盤導航，比如用Tab鍵控制標簽切換，上/下方向箭頭在不同的面板間切換。
如果JavaScript被禁用，那麼Accordion應該退而求其次作些有用的改變，比如同時展示所有面板。
完全不顯示任何面板並不可取，因為這有可能讓屏幕閱讀器找不到內容。因此不妨考慮設置高度為0.
申明：本文由Pmcaff.com翻譯
原文鏈接：http://developer.yahoo.com/ypatterns/navigation/accordion.html