Можно ли развернуть / свернуть содержимое JQuery ui Accordion, щелкнув и другие элементы?

Question

По умолчанию существуют заголовки содержимого для управления расширением / свертыванием. Но в моей ситуации я мог бы развернуть / свернуть содержимое и другими элементами. Например:

базовая структура jcoery ui код-код:

<script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>



<div class="demo">

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
......
</div>

и сейчас. У меня есть другие элементы, такие как:

<ul id="another elements can expand/collapse too">
    <li><a href="">  expand/collapse contents of section1 of id=accordion too</a></li>
........
</ul>

Большое спасибо !!

Answer 1

Свернуть вкладку аккордеона:

$('.accordion').accordion('activate', false );

Развернуть первую вкладку аккордеона:

$('.accordion').each(function (idx, item) {
    if ($(item).accordion("option", "active") === false) {
        $(item).accordion('activate', 0);
    }
});

Answer 2

После обновления пользовательского интерфейса JQuery на гармошке нет «активного» метода. Итак, чтобы свернуть все гармошки, используйте:

$('.accordion').accordion('option', {active: false});

Answer 3

Мне было трудно заставить Аккордеоны свернуться / развернуться после их начальной загрузки. Чтобы обойти это, я использовал:

$('#accordionId h3').click();

... который имитирует щелчок области заголовка и заставляет переключать классы активации.

Чувствовал себя как хак, но это то, что сработало, Бест.

Answer 4

Вы можете использовать .activate со значением false, чтобы программно свернуть все элементы. Поскольку у вас когда-либо открыт только один элемент за раз, это сработает, чтобы свернуть любой открытый элемент, показывающий эту ссылку. Это будет работать, только если для collapsible установлено значение true.

Вы можете передать другой элемент, который хотите развернуть, чтобы развернуть этот элемент по щелчку.

Answer 5

Используя Bootstrap:

    //To Expand
    var elem  = $(this).find('.accordionElement');
    elem.addClass("in");
    elem.attr("style","");
    elem.attr("aria-expanded",true);

, тогда вы можете свернуть, используя:

    var elem  = $(this).find('.accordionElement');
    elem.removeClass("in");
    elem.attr("style","height: 0px;");
    elem.attr("aria-expanded",false);