jquery 두 번째 클릭에 숨어 있지 않은 아코디언 콘텐츠

Question

나는 원하는대로 작동하는 jQuery 아코디언 스크립트가 있습니다.

그러나 이상적으로 열려있는 콘텐츠를 닫으려면 두 번째 클릭해야합니다.

Like bootstrap accordion here. 내 메뉴가 동적이며 'ID'가 하나뿐이기 때문에이 메뉴를 사용하지 않습니다. 왜이 메뉴를 사용하지 않는지 궁금한 경우.

하지만 위의 예와 같이 내 스크립트는 열린 콘텐츠를 닫지 않습니다.

JSfiddle Link

모든 제안이 부트 스트랩 아코디언처럼 부드러운 작업을 만들려면?

내 HTML :

<div id="wrapper"> 
    <div class="accordionButton">monday</div> 
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br />more weather</div> 
    <div class="accordionButton">tuesday</div> 
    <div class="accordionContent">sunny<br /><br /><br /><br /><br />more weather</div> 
    <div class="accordionButton">wednesday</div> 
    <div class="accordionContent">sunny<br />more weather</div> 
    <div class="accordionButton">thursday</div> 
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />more weather</div> 
</div> 

자바 스크립트 : 어떤 도움을 주시면 감사하겠습니다

$(document).ready(function() { 

//ACCORDION BUTTON ACTION 
$('div.accordionButton').click(function() { 
    $('div.accordionContent').slideUp('normal');  
    $(this).next().slideDown('normal'); 
}); 

//HIDE THE DIVS ON PAGE LOAD  
$("div.accordionContent").hide(); 

}); 

.

 if(!$(this).next().is(':visible')) 
    { 
     $(this).next().slideDown('normal'); 
    } 

숨겨진 경우

Answer 1

당신은 here

Answer 2

시도 만 확장하려고 할 수 나는 다음과 같이 스크립트를 변경이 .. JSFiddle

첨부 된 바이올린 체크를 변경했습니다.

$('div.accordionButton').click(function() { 
    if($(this).hasClass("expanded")){ 
    $(this).next().slideUp('normal'); 
     $(this).removeClass('expanded'); 
    } 
    else{ 
    $(this).addClass("expanded"); 
    //$('div.accordionContent').slideUp('normal'); 
    $(this).next().slideDown('normal'); 
    } 
}); 

//HIDE THE DIVS ON PAGE LOAD  
$("div.accordionContent").hide(); 

});

Answer 3

이 기능을 사용해보십시오. 모든 기능 확장/축소 기능을 제공합니다.

는 URL :http://accordion-cd.blogspot.com/

Answer 4

이 내가 생각할 수있는 가장 가벼운 버전 :

$(document).ready(function() { 
$('.accordionButton').click(function(){ 
    $('.accordionContent').slideUp(300); 
    if(!$(this).next('.accordionContent').is(':visible')) {     
     $(this).next('.accordionContent').slideDown(300); 
    } 
}); }); 

Answer 5

이 여기

$(document).ready(function() { 

//ACCORDION BUTTON ACTION 
$('div.accordionButton').click(function() { 
    $('div.accordionContent').removeClass('active').addClass('inactive');  
    $(this).next().removeClass('inactive').addClass('active').slideDown('normal'); 
    $('div.inactive').slideUp('normal'); 

}); 
//HIDE THE DIVS ON PAGE LOAD  
$("div.accordionContent").hide(); 

}); 

작동은 바이올린 jsfiddle.net/wTLLP/

Answer 6

추가에게 있습니다 데이터 조건을 확인하는 공물.

$(document).ready(function() { 

    //ACCORDION BUTTON ACTION 
    $('div.accordionButton').click(function() { 
     if($(this).data("slided") === true) { 
      $(this).next().slideUp('normal'); 
      $(this).data("slided", false); 
     } else { 
      $('div.accordionContent').slideUp('normal');  
      $(this).next().slideDown('normal'); 
      $(this).data("slided", true); 
     } 
    }); 

    //HIDE THE DIVS ON PAGE LOAD  
    $("div.accordionContent").hide(); 

}); 

데모 - JSFIDDLE