arrow_upward
13
arrow_downward

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

$('#accordion .ui-accordion-content').show();

ivan-ivory 06.02.2013

comment

обратите внимание, что при активации нового аккордеона текущий активированный будет свернут - Aprillion; 05.03.2014

arrow_upward
4
arrow_downward

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

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

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

Dustin Laine 01.04.2010

arrow_upward
4
arrow_downward

Я бы порекомендовал этот плагин 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');

maxisam 01.03.2012

arrow_upward
4
arrow_downward

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

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 менять цвет при использовании (например: посетили), могу ли я?

atmelino 10.10.2013

comment

Отличный пример Спасибо именно то, что я хотел...! - Alfred Alfizo Mosima; 11.09.2014

arrow_upward
0
arrow_downward

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

CSS:

.myClassToBeHidden { display: none; }

jQuery:

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

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

Nick Craver 01.04.2010

comment

@durilai - Не уверен, что они спрашивают, основываясь на вопросе, просто добавлял дополнительную информацию о каждом. - Nick Craver; 01.04.2010

arrow_upward
0
arrow_downward

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

CSS:

#divToBeHidden { display: block; }

In <head>:

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

Нижняя часть <body>:

$(function() {
 $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content
});

David Andersson 01.04.2010

comment

@elcherino: я не знаю, правильно ли я понял ваш вопрос, пожалуйста, развивайте дальше то, что вы хотели бы сделать. - David Andersson; 01.04.2010

comment

Вы можете разместить функцию $(function() { }); где угодно... она не будет работать, пока документ не будет готов, и в любом случае не заблокирует страницу :) - Nick Craver; 01.04.2010

comment

@Nick Craver: О да, конечно, ты прав. Спасибо. Просто мне нравится держать все во время выполнения внизу. :) - David Andersson; 01.04.2010

comment

Моя проблема: у меня есть js. Мой текст поиска js на моей странице. Но мой скрипт не находит текст (даже если он есть) в скрытом div. Итак, моя идея такова: когда пользователь автоматически записывает строку в текст моего типа ввода, я расширяю все div, поэтому мой скрипт поиска запускается, и пользователь находит текст. Извините за мой плохой английский :-) - user305912; 01.04.2010

arrow_upward
0
arrow_downward

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

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

timbck2 30.08.2012

arrow_upward
0
arrow_downward

Лол, здесь много ответов, но, похоже, самого простого решения нет. Ответ да, и нет". Вы не можете использовать "традиционную" команду, однако вы можете использовать "классы" и написать JS самостоятельно, что СУПЕР ПРОСТО!

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

_{Или, конечно, вы можете получить этот подключаемый модуль xtra, готовый к 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"); });
})

SpYk3HH 11.04.2013

arrow_upward
0
arrow_downward

Прошло 9 лет с тех пор, как был задан этот вопрос. Но я нашел приведенное ниже решение, чтобы открыть все разделы аккордеона по умолчанию. Здесь я использовал метод slideDown(), чтобы показать все содержимое div.

$(function () {
          $("#accordion").accordion({
                header: "> div > h3",
                collapsible: true,
               heightStyle: "content"
           });
          jQuery('#accordion h3.ui-accordion-header').next().slideDown();
 });

Oops 29.08.2019

arrow_upward
-1
arrow_downward

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

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();}

ссылка на полную статью

mahmoodels 27.01.2013

arrow_upward
-1
arrow_downward

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

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

$("#accordion_div").мультиAccordion("option", "active", [0,1]);

Steve Breese 23.03.2015

jQuery Accordion развернуть весь div

Ответы (11)

jsFiddle

HTML

JavaScript

jQuery Accordion развернуть весь div

Ответы (11)

jsFiddle

HTML

JavaScript

Похожие вопросы