모든 것을 표시 할 수있는 아코디언. 한 번에 열어 본 사람 만 필요합니다.

Question

첫 번째 일부터. 메리 크리스마스.

http://bootsnipp.com/snippets/4OlpK에서 아코디언 스크립트를 사용하고 있습니다. 괜찮습니다. 그러나 아코디언 옵션을 클릭 할 때 축소 옵션이 필요합니다. 현재 모든 것이 공개 될 수 있습니다. 한 번에 열 수있는 아코디언 옵션 하나만 있으면됩니다.

도움말. 당신이 JS는 아래와 같은 기능을

Answer 1

변경

$(function() { 
    $(".expand").on("click", function() { 
    $(".expand").find(">:first-child").text("+"); 
    $(".detail").css("display","none"); 
    $(this).next().slideToggle(200); 
    $expand = $(this).find(">:first-child"); 

    if($expand.text() == "+") { 
     $expand.text("-"); 
    } else { 
     $expand.text("+"); 
    } 
    }); 
}); 

이 fiddle를 찾기 작동합니다.

Answer 2

이와 자바 스크립트를 교체 :이 slideUp 방법을 사용하여 솔루션이 될 것

$(function() { 
    $(".expand").on("click", function() { 
    if($(this).next().css("display")=="none"){ 
     $(".expand").next().css("display","none"); 
     $expandold = $(".expand").find(">:first-child"); 
     $expandold.text("+"); 
     $(this).next().slideToggle(200); 
     $expand = $(this).find(">:first-child"); 
     $expand.text("-"); 
    } 
    else{ 
     $(".expand").next().css("display","none"); 
     $expand = $(this).find(">:first-child"); 
     $expand.text("+"); 
    } 

    }); 
}); 

는 다음 작업 codepen

Answer 3

입니다.

$(function() { 
    $(".expand").on("click", function() { 
    $('.detail').not($(this).next()).slideUp().prev().find(">:first-child").each(function(){ 
     $(this).text("+"); 
    }); 

    $(this).next().slideToggle(200); 
    $expand = $(this).find(">:first-child"); 

    if($expand.text() == "+") { 
     $expand.text("-"); 
    } else { 
     $expand.text("+"); 
    } 
    }); 
});