jQuery 아코디언 - 처음에는 모든 탭을 닫는 방법

Question

간단한 FAQ 아코디언 구조를 사용하고 제목에 마우스를 올리면 설명을 열거 나 닫을 수 있지만 모든 탭 (설명)을 처음에는 닫지 않도록 관리 할 수는 없습니다.

접을 수있는 항목을 true로 설정하고 활성을 false로 설정하는 방법에 대해 읽었지만 그 작업을 관리 할 수는 없습니다. 누구든지 도와 줄 수 있습니까?

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 코드를 단순화하여 원하는 수의 요소에 대해 작업 할 수 있습니다. 현재 추가 된 각각의 새 제목/설명에 대해 이벤트 핸들러를 추가해야합니다. 이 시도 :이 또한로 마우스 관련 .description 요소를 닫습니다 나는이의 hover 이벤트를 사용

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

참고.

그런 다음 CSS 사용하여 페이지로드에있는 모든 .description 요소를 숨길 수 있습니다 :

.description { 
    display: none; 
} 

Example fiddle

Answer 2

당신은 "설명"로 시작하는 모든 요소를 ​​반복하는 jQuery의 각 기능을 사용하려면를 ID 그들을 숨기 :

여기

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

가 jsFiddle

입니다