Аккордеон JQuery расширить все див - PullRequest
Новая
       58

Аккордеон JQuery расширить все див

4 голосов
/ 01 апреля 2010

Можно ли развернуть все компоненты при загрузке страницы или при возникновении события? Спасибо !!

Ответы [ 10 ]

13 голосов
/ 06 февраля 2013

Просто используйте это 

$('#accordion .ui-accordion-content').show();
4 голосов
/ 01 марта 2012

Я бы порекомендовал этот плагин Multi-open Accordion 

// this will make the second tab by default opened (index starts from 0)
$('#multiAccordion').multiAccordion({active: 1 }); 

// [ OR ]
// supports multiple tabs to be opened by default
$('#multiAccordion').multiAccordion({active: [1, 2, 3] }); 

// show all tabs
$('#multiAccordion').multiAccordion({active: 'all' });

// hide all tabs
$('#multiAccordion').multiAccordion({active: 'none' });

// you can set the options as any jQuery UI plugin using option method
$('#multiAccordion').multiAccordion('option', 'active', 'all');
4 голосов
/ 01 апреля 2010

Нет, если вы ссылаетесь на аккордеон в качестве вашего тега. Из jQuery.

ПРИМЕЧАНИЕ: если вы хотите несколько разделов открой сразу, не используй гармошку

http://docs.jquery.com/UI/API/1.8/Accordion

3 голосов
/ 11 октября 2013

Мне нравится эта реализация переключателя:

http://jsfiddle.net/kevinPHPkevin/mZhTY/107/

<div class="toggle-box">
  <div class="toggle-title">Toggle 1</div>
  <div class="toggle-content">
    <p>text1.</p>
  </div>
  <div class="toggle-title">Toggle 2</div>
  <div class="toggle-content">
    <p>text2.</p>
  </div>
  <div class="toggle-title">Toggle 3</div>
  <div class="toggle-content">
    <p>text3</p>
  </div>
</div>

Нашел по адресу

Я не могу сделать, чтобы вкладка аккордеона JQuery UI меняла цвета при использовании (например, в качестве посещенного), могу ли я?

0 голосов
/ 23 марта 2015

Плагин MultiAccordion jQuery UI отлично работал для меня: https://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

После добавления ссылки на плагин после ссылки на jQuery UI вам просто нужно сделать 2 простых изменения:

$ ("# accordion_div"). multi Аккордеон ("option", "active", [0,1] );

0 голосов
/ 11 апреля 2013

Lol, здесь много ответов, но, похоже, простейшего решения не существует.Ответ и да и нет".Вы не можете использовать «традиционную» команду, однако вы можете использовать «классы» и написать JS самостоятельно, что означает SUPER SIMPLE !

Просто сделайтеваш собственный Аккордеон, использующий классы jQueryUI и немного JS, и вы готовы к работе.Это ОЧЕНЬ легко и поддерживается с вашим jQueryUI ThemeRoller.Если вам нужны опции «x-tra», которые предоставляет «официальный виджет аккордеона», вы можете управлять всеми из них с помощью немного больше CSS или JS.На самом деле не так сложно.Ниже приведена ссылка на рабочий пример кода, который я опубликую.Все, что я просто сделал, это скопировал их классы в мой HTML-макет дословно.HTML по-прежнему выложен так же, как и любой другой аккордеон jQueryUI, за исключением того, что мы применяем классы вручную, а не позволяем jQuery это делать.Посмотрите ниже, чтобы понять, что я имею в виду.

Или, конечно, вы можете получить этот дополнительный плагин для jquery-темы

jsFiddle

HTML 

<div id="StickyNotes">
    <div class="container">
        <div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 1
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <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>
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 2
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <p>
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna.
                </p>
            </div>
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 3
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <p>
                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                </p>
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top ui-accordion-header-active ui-state-active">
                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                Section 4
            </h3>
            <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
                <p>
                    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                    mauris vel est.
                </p>
                <p>
                    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos himenaeos.
                </p>
            </div>
        </div>
    </div>
</div>

JavaScript 

$(function() {
    $("#accordion > h3").on("click", function(e) {
        $(this).next().slideToggle(function(e) {
            if ($(this).is(":visible")) {
                $(this).addClass("ui-accordion-content-active")
                .prev().toggleClass("ui-corner-all ui-corner-top").addClass("ui-accordion-header-active ui-state-active")
                .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s");
            }
            else {
                $(this).removeClass("ui-accordion-content-active")
                .prev().toggleClass("ui-corner-all ui-corner-top").removeClass("ui-accordion-header-active ui-state-active")
                .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s");
            }
        });
    })
    .hover(function(e) { $(this).toggleClass("ui-state-hover"); });
})
0 голосов
/ 27 января 2013

Я знаю, что слишком поздно, но я нашел решение сегодня. Просто используйте 

function expandAll() {
$('#accordion h3').removeClass('ui-state-default')
    .addClass('ui-state-active')
    .removeClass('ui-corner-all')
    .addClass('ui-corner-top')
    .attr('aria-expanded', 'true')
    .attr('aria-selected', 'true')
    .attr('tabIndex', 0)
.find('span.ui-icon')
    .removeClass('ui-icon-triangle-1-e')
    .addClass('ui-icon-triangle-1-s')
.closest('h3').next('div')
    .show();}

ссылка на полный текст статьи

0 голосов
/ 30 августа 2012

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

<script type="text/javascript">
function accordionInit() {
    $("#accordion").accordion();
}

function accordionDestroy() {
    $("#accordion").accordion("destroy");
}

$(function() {
    accordionInit();
});
</script>

Развернуть все и свернуть все ссылки будет выглядеть так: 

<a onClick="accordionDestroy()">Expand all</a> | <a onClick="accordionInit()">Collapse all</a>
0 голосов
/ 01 апреля 2010

Чтобы сделать его ненавязчивым и быть скрытым, только если у посетителя есть javascript, я бы поставил

CSS: 

#divToBeHidden { display: block; }

В <head>: 

$('#divToBeHidden').hide();

Низ <body>: 

$(function() {
 $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content
});
0 голосов
/ 01 апреля 2010

Вы можете сделать это в document.ready событии, которое предоставляет jQuery, например:

CSS: 

.myClassToBeHidden { display: none; }

JQuery: 

$(function() {
  $(".myClassToBeHidden").slideDown();
});

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

...