jQuery Accordion - как изначально закрыть все вкладки

Question

Иметь простую часто задаваемую структуру аккордеона и иметь возможность открывать / закрывать описание при наведении курсора на заголовок, но не удается изначально закрыть все вкладки (описания).

Я читал кое-что о том, как установить разборное значение в истинное значение, а активное - в ложное, но мне не удается это сделать. Кто-нибудь может помочь?

HTML:

<div id="accordion"> 
    <div id="title1">Title 1</div>
    <div id="description1">Description 1</div>

    <div id="title2">Title 2</div>
    <div id="description2">Description 2</div>
</div>

JQuery:

$('#title1').mouseover(function(){
    $('#description1').slideToggle('slow', function(){
    });
})

$('#title2').mouseover(function(){
    $('#description2').slideToggle('slow', function(){
    });
})

Answer 1

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

<div id="accordion">
    <div class="title">Title 1</div>
    <div class="description">Description 1</div>

    <div class="title">Title 2</div>
    <div class="description">Description 2</div>
</div>

$('.title').hover(function () {
    $(this).next('.description').stop(true).slideToggle('slow');
});

Обратите внимание, что я использовал hover событие, так как это также закроет .description элемент на мышке.

Затем вы можете скрыть все .description элементы при загрузке страницы с использованием CSS:

.description {
    display: none;
}

Пример скрипки

Answer 2

Вы хотите использовать каждую функцию JQuery, чтобы перебрать все элементы, которые начинаются с идентификатора "description", и скрыть их:

$('[id^=description]').each(function(i,e){
       $(e).hide();   
});

Вот jsFiddle