Автоматически показывает 1 часть аккордеона jquery при загрузке страницы вместо того, чтобы изначально скрывать все части

Question

У меня есть следующий код Javascript, который управляет набором типов аккордеона div. Набор div построен следующим образом:

<h1>click here to show next div</h1>
<div>text to show</div>
<h1>click here to show next div</h1>
<div>text to show</div>
<h1>click here to show next div</h1>
<div>text to show</div>

Полагаю, вы все знаете, как работает аккордеон. Тег H1 - это щелчок триггера, который показывает следующий элемент Div, но скрывает все остальные элементы Div.

<script language="javascript"><!--
$(document).ready(function(){
  toggler();
});
function toggler() {

$('.trigger').click( function() {
    if ( $(this).hasClass('trigger_active') ) {
        $(this).next('.toggle_container').slideToggle('fast');
        $(this).removeClass('trigger_active');
    } else {
        $('.trigger_active').next('.toggle_container').slideToggle('fast');
        $('.trigger_active').removeClass('trigger_active');
        $(this).next('.toggle_container').slideToggle('fast');
        $(this).addClass('trigger_active');
    };
return false;
});
}
//--></script>

Теперь при загрузке страницы все div будут закрыты, что довольно глупо. Теперь я хочу активировать первый div при загрузке страницы, поэтому пользователю не нужно нажимать на него. У вас есть идеи, как это сделать? Я попытался присвоить первому div уникальный идентификатор и показать его при загрузке DOM, но тогда он не рухнет, если я нажму на другие триггеры (он никогда не скроется)

Answer 1

Вы можете инициировать фактический щелчок для первого при загрузке:

$(function() {
    // ...
    $('.trigger:first').click();
}

Однако в вашем HTML нет .trigger s, верно?

Answer 2

Имитация события клика при загрузке страницы не кажется мне чистой.Возможно, вам просто нужно назначить классы для ваших первых предметов.Проверьте этот jsFiddle для примера.

Answer 3

Вы можете вызвать функцию щелчка .trigger при загрузке страницы методом

$(document).ready(function(){
  toggler();
 $('.trigger:first').click();
});