JQuery UI Accordion Развернуть/Свернуть все

Ответ 1

В итоге я нашел это лучшим решением, учитывая требования:

// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
    $(this).toggleClass('collapse');
    return false;
});

Ответ 2

Как обсуждалось в форумах jQuery UI, вы не должны использовать для этого аккордеоны.

Если вы хотите что-то, что выглядит и действует как аккордеон, все в порядке. Используйте их классы для их стилизации и реализуйте любую функциональность, в которой вы нуждаетесь. Затем добавить кнопку, чтобы открыть или закрыть их все довольно просто. Пример

HTML

Используя классы jquery-ui, мы сохраняем наши аккордеоны похожими на "настоящие" аккордеоны.

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 1
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        Content 1
    </div>
</div>​

Сверните свои собственные аккордеоны

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

var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');

headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');

    // open or close as necessary
    panel[isOpen? 'slideUp': 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen? 'hide': 'show');

    // stop the link from causing a pagescroll
    return false;
});

Развернуть/Свернуть все

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

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

Поменять кнопку, когда "все открыто"

Благодаря нашим пользовательским событиям "показать" и "скрыть" у нас есть, что нужно слушать, когда панели меняются. Единственный частный случай - "все они открыты", если да, кнопка должна быть "Свернуть все", если не должна быть "Развернуть все".

contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open, swap the button to collapser
    show: function(){
        var isAllOpen = !contentAreas.is(':hidden');   
        if(isAllOpen){
            expandLink.text('Collapse All')
                .data('isAllOpen', true);
        }
    },
    // whenever we close a panel, check to see if they're all open
    // if not all open, swap the button to expander
    hide: function(){
        var isAllOpen = !contentAreas.is(':hidden');
        if(!isAllOpen){
            expandLink.text('Expand all')
            .data('isAllOpen', false);
        } 
    }
});​

Изменить комментарий: Поддержание "1 панель открыта только", если вы не нажмете кнопку "Развернуть все", на самом деле намного проще. Пример

Ответ 3

Это мое решение:

Работа в реальном проекте.

   $(function () {
    $("#accordion").accordion({collapsible:true, active:false});
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
        $(this).hide();
        $('.close').show();
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
        $(this).hide();
        $('.open').show();
    });
    $('.ui-accordion-header').click(function () {
        $('.open').show();
        $('.close').show();
    });
});

http://jsfiddle.net/bigvax/hEApL/

Ответ 4

Многие из них кажутся слишком сложными. Я достиг того, что хотел, только следующим образом:

$(".ui-accordion-content").show();

JSFiddle

Ответ 5

Я не думаю, что вы можете сделать это с помощью аккордеона, поскольку он специально разработан, чтобы сохранить свойство, которое откроется не более чем на одном элементе. Однако, несмотря на то, что вы говорите, что не хотите повторно выполнять аккордеон, вы можете оценить сложность.

Рассмотрим следующий сценарий, в котором у вас есть вертикальный стек элементов,

++++++++++++++++++++
+     Header 1     +
++++++++++++++++++++
+                  +
+      Item 1      +
+                  +
++++++++++++++++++++
+     Header 2     +
++++++++++++++++++++
+                  +
+      Item 2      +
+                  +
++++++++++++++++++++

Если вы ленивы, вы можете построить это с помощью таблицы, иначе будут также работать подходящие DIV.

Каждый из блоков элементов может иметь класс itemBlock. При нажатии на заголовок все элементы класса itemBlock будут скрыты ($(".itemBlock").hide()). Затем вы можете использовать функцию jquery slideDown(), чтобы развернуть элемент под заголовком. Теперь вы в значительной степени реализовали аккордеон.

Чтобы развернуть все элементы, просто используйте $(".itemBlock").show() или, если хотите, анимировать, $(".itemBlock").slideDown(500). Чтобы скрыть все элементы, просто используйте $(".itemBlock").hide().

Ответ 6

Здесь код Sinetheta преобразован в плагин jQuery: Сохраните код ниже в js файле.

$.fn.collapsible = function() {
    $(this).addClass("ui-accordion ui-widget ui-helper-reset");
    var headers = $(this).children("h3");
    headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
    headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
    headers.click(function() {
        var header = $(this);
        var panel = $(this).next();
        var isOpen = panel.is(":visible");
        if(isOpen)  {
            panel.slideUp("fast", function() {
                panel.hide();
                header.removeClass("ui-state-active")
                    .addClass("ui-state-default")
                    .children("span").removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-triangle-1-e");
          });
        }
        else {
            panel.slideDown("fast", function() {
                panel.show();
                header.removeClass("ui-state-default")
                    .addClass("ui-state-active")
                    .children("span").removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-triangle-1-s");
          });
        }
    });
}; 

Обратитесь к нему на странице пользовательского интерфейса и вызовите аналогичный вызов в режиме jQuery:

$("#accordion").collapsible(); 

Выглядит чище и избегает любых классов, добавляемых к разметке.

Ответ 7

попробуйте этот jquery-multi-open-accordion, может помочь вам

Ответ 8

Второй комментарий bigvax ранее, но вам нужно убедиться, что вы добавили

        jQuery("#jQueryUIAccordion").({ active: false,
                              collapsible: true });

в противном случае вы не сможете открыть первый аккордеон после их сглаживания.

    $('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
    $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
   }

Ответ 9

Yes, it is possible. Put all div in separate accordion class as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

        $(function () {
            $("input[type=submit], button")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
            $("#tabs").tabs();
            $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0



            });
        });

function expandAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0

            });

            return false;   
}

function collapseAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: false



            });
            return false;
}
</script>



<div class="accordion">
  <h3>Toggle 1</h3>
  <div >
    <p>text1.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 2</h3>
  <div >
    <p>text2.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 3</h3>
  <div >
    <p>text3.</p>
  </div>
</div>

Ответ 10

Вы можете попробовать этот легкий маленький плагин.

Это позволит вам настроить его согласно вашему требованию. Он будет иметь функциональные возможности Expand/Collapse.

URL: http://accordion-cd.blogspot.com/

Ответ 11

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

Я использовал imageButton, но вы также можете применить эту логику к кнопкам.

/*** Expand all ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();

    return false;
});

/*** Collapse all ***/
$(".collapseAll").click(function (event) {
    $('.accordion').accordion({
        collapsible: true,
        active: false
    });

    $('.accordion .ui-accordion-header').next().slideUp();

    return false;
});

Кроме того, если у вас есть аккордеоны внутри аккордеона, и вы хотите развернуть все только на этом втором уровне, вы можете добавить запрос:

/*** Expand all Second Level ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();

    return false;
});

Ответ 12

Используя пример для Тайфуна,  Я модифицировал, чтобы разрешить расширение и сбой.

...   // Подключите расширение/свернуть все

var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});