Закрытие jQuery UI Accordions With CSS

Question

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

Answer 1

Там же вариант на самом .accordion({ ... }) вызова:

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

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

Answer 2

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

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

Answer 3

После установки с JQuery Аккордеон documentation, вы можете просто положить <div style="display: none"> на содержание сНу ниже h3 заголовков. Это скроет весь контент в аккордеоне во время загрузки страницы.

Answer 4

Вы можете установить это нравится:

.accordion-body{ 
    display: none; 
} 

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

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

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

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

Answer 5

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

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

.accordionSelector > div { display:none; } 

Затем измените displayblock обратно после загрузки JQuery:

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