jQuery - 手風琴盒

Question

我在窗體上有一系列框/內容塊，只需顯示框的標題，在其下方有一個「查看更多」按鈕。當用戶點擊查看更多時，該框應該垂直展開以顯示其內容。另外，如果點擊另一個「查看更多」，則需要關閉其他任何打開的框。

我該如何使用jQuery來完成這項工作？我想也許我可以使用手風琴插件，但這聽起來像只適用於列表顯示。

例子：

框標題
查看更多！

*用戶點擊

框標題

• 內容
• 內容
• 內容
• 內容

關閉

Answer 1

的jQuery UI Accordion plugin不依賴於列表，你可以使用類似這樣的標記：

<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div> 

Answer 2

http://jqueryui.com/demos/accordion/看主題化標籤，它不使用名單。