Jquery UI -单独显示/关闭折叠标签

Question

我正在尝试设置一个手风琴风格的标签列表，我可以同时打开多个标签。基本上我希望它是这样工作的：http://jqueryui.com/demos/accordion/在文档的底部，当你查看options标签，它列出了disable，active等，你可以打开一个或所有的标签。

我不明白如何设置手风琴来做这件事，所以我做了一个基本版本的切换，但我必须手动输入每个选项卡的id才能打开/关闭。我相信有一种更有效的方法来做这件事，所以它可以扩展到任何数量的项目，谁能告诉我这是什么…

<style>
.newClass { display: none }
</style>
<script>
$(function() {
    $( "#button-1" ).click(function() {
        $( "#effect-1" ).toggleClass( "newClass", 1000 );
        return false;
    });
    $( "#button-2" ).click(function() {
        $( "#effect-2" ).toggleClass( "newClass", 1000 );
        return false;
    });
});
</script>

<a href="#" id="button-1" class="ui-state-default ui-corner-all">Run Effect 1</a>
<div id="effect-1" class=" ui-corner-all">
        Toggle1
</div>

<a href="#" id="button-2" class="ui-state-default ui-corner-all">Run Effect 2</a>
<div id="effect-2" class=" ui-corner-all">
        Toggle 2 
</div>

加分，如果有人可以展示如何动画它滑动向上/向下，当你点击按钮

Answer 1

您只需要为页面上的所有切换设置一个泛型类。

之后，我使用了.next()来切换任何内容。您可以将其更改为一个类或其他任何内容。

这是一个演示：http://jsfiddle.net/gZBDK/

以下是有关next()的更多信息：http://api.jquery.com/next/