Jquery UI - Показать / закрыть аккордеонные вкладки отдельно

Question

Я пытаюсь настроить список вкладок в аккордеонном стиле, где я могу открыть несколько вкладок одновременно. По сути, я хочу, чтобы он работал следующим образом: http://jqueryui.com/demos/accordion/ под документами внизу, когда вы смотрите на вкладку параметров, в которой перечислены списки отключенных, активных и т. Д., Вы можете открыть одну или все вкладки.

Я не вижу, как вы можете установить аккордеон для этого, поэтому я сделал базовую версию с переключателем, который работает, но мне нужно вручную ввести идентификатор каждой вкладки, чтобы открывать / закрывать. Я уверен, что есть более эффективный способ сделать это, так что он масштабируется для любого количества предметов, может кто-нибудь, пожалуйста, скажите мне, что это такое ...

<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/