Закрытие jQuery UI Accordions с помощью CSS

Question

Есть ли способ принудительно закрывать аккордеоны jQuery UI с помощью CSS до завершения загрузки страницы? Мы используем его в системе управления контентом, и загрузка каждой страницы занимает определенное время. JQuery не запускается до тех пор, пока страница не будет загружена, но с этого момента все аккордеоны уже развернуты. Они закрываются, как только страница загружается, но я чувствую, что пользователям непонятно, как гигантский список появляется, а затем исчезает.

Answer 1

На самом вызове .accordion({ ... }) есть опция:

.accordion({ active: false, collapsible: true });

Опция active: false закрывает ее при создании, а опция collapsible: true делает ее закрытой, как только выоткрой его.

Answer 2

Вы можете попробовать что-то вроде этого:

В вашем CSS примените стили к селектору, который вы используете для вызова аккордеона:

.accordionSelector > div { display:none; }

Затем измените display обратноblock после загрузки jQuery:

$(".accordionSelector").accordion({...}).children("div").css("display","block");

Answer 3

Вы можете установить его как:

.accordion-body{
    display: none;
}

Я полагаю, что аккордеон будет где-то вызывать $ .show (или похожий), так что вам не нужно будет беспокоиться, отображая его снова. Опять же, это предположение, поэтому в случае, если я ошибаюсь, вы снова делаете это видимым, используя

$('.accordion-body').css('display', 'block');
$('#accordion').accordion();

Но, если вы звоните .accordion() при загрузке, вы также можете попробовать запустить его раньше, используя .load:

$('#accordion').load(function(){
    $(this).accordion();
});

Answer 4

Следуя настройке из документации jQuery Accordion , вы можете просто поставить <div style="display: none"> на содержимое div под заголовками h3 . Это будет скрывать весь контент в аккордеоне, пока страница загружается.

Answer 5

Параметры показывают, как инициализировать аккордеон с закрытыми вкладками. См .: http://jqueryui.com/demos/accordion/#option-active Это означает, что код инициализации будет:

$( ".selector" ).accordion({ active: false, collapsible: true });