Откройте все окна гармошки одновременно

Question

Я использую плагин JQuery для моего приложения. Есть ли способ открывать разделы одновременно (после загрузки страницы), чтобы содержимое всех страниц отображалось одновременно. Если это невозможно, пожалуйста, дайте мне ссылку, где я могу достичь аналогичных функций. Благодарю. Я новичок в jQuery.

Answer 1

Решение с темой!

_{без плагина} Это действительно очень просто. Используйте ту же разметку, что и обычный аккордеон. Скопируйте классы из обычного аккордеона в вашу разметку. Добавьте «маленькую» магию JavaScript и альт!

Пример 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"); });
})

---

Конечно, если вы все еще хотите, чтобы jQueryUI Theme Compatible ( _{или около того, как они утверждают, лично не проверен} ) подключаемый модуль для добавления к вашим библиотекам, вы можете найти один здесь !

Answer 2

Вы должны прочитать примечания на этой странице . Здесь я скопировал и вставил его прямо с этой страницы:

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

Аккордеон не позволяет открывать более одной панели контента одновременно, и для этого требуется много усилий. Если вы ищете виджет, который позволяет открывать более одной панели контента, не используйте это. Обычно это может быть записано с несколькими строками jQuery, примерно так:

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

Или анимированные:

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});

Answer 3

jQuery позволяет очень легко сделать свой собственный аккордеон без плагина. Например, этот HTML:

<div class="accordion_toggler">
    Section One
</div>

<div class="accordion_content">
    ..... content here ......
</div>

и этот JQuery:

$('.accordion_toggler').click(function() {
    $(this).next('.accordion_content').slideToggle();
});

Каждый раз, когда вы нажимаете accordion_toggler, переключается следующее accordion_content (в этом случае сдвигается вверх или вниз). Чтобы начать со всего скрытого контента, но разрешить одновременное открытие нескольких файлов, используйте этот CSS:

.accordion_content { display: none }