Jquery Accordions

Question

Я использую следующую функцию, чтобы показать мои аккордеоны

<script type="text/javascript">
$(document).ready(function(){

    $(".accordion h3:first").addClass("active");
    $(".accordion div:not(:first)").hide();

    $(".accordion h3").click(function(){
        $(this).next("div").slideToggle("fast")
        .siblings("div:visible").slideDown("fast");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });

});
</script>

поэтому первый аккордеон открыт при загрузке страницы, затем, когда я нажимаю на любой другой аккордеон, который уже открыт, остается открытым, а другой открывается также, предыдущий закрывается только при нажатии на него. Чего я хотел бы добиться, так это закрыть предыдущий аккордеон при нажатии на следующий. Кто-нибудь может мне помочь с перестройкой этой функции. Большое спасибо

Answer 1

Очень простой аккордеон (без аккордеонных контейнеров):

https://jsfiddle.net/iocron/mu4jg67n/3/

$(".acc-content").hide();
$(".acc-toggler").on("click",function(e){
	var accContent = $(this).next(".acc-content");
  
	$(".acc-content").not(accContent).slideUp();
	accContent.slideToggle();
});

body,* { margin:0; padding:0; }
body { line-height:1; }

.acc-toggler { padding:10px 12px; border-bottom:1px solid #ccc; background:#ddd; cursor:pointer; }
.acc-content { padding:10px 12px; background:#eee; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h3 class="acc-toggler">Accordion 1</h3>
  <div class="acc-content">Text Content 1</div>
  <h3 class="acc-toggler">Accordion 2</h3>
  <div class="acc-content">Text Content 2</div>
  <h3 class="acc-toggler">Accordion 3</h3>
  <div class="acc-content">Text Content 3</div>
</div>

Answer 2

$(".title_div").click(function(){
        $('.content_div').slideUp();
        if($(this).next().is(":visible")){
            $(this).next().slideUp();    
        }else{
            $(this).next().slideDown();
        }
    });

.title_div{ display:block; padding:10px 20px; border:1px solid #ddd;}

.content_div{ display:none; padding:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="box">    
  <div class="title_div">
    title
  </div>
  <div class="content_div">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th
  </div>
  <div class="title_div">
    title
  </div>
  <div class="content_div">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th
  </div>
  <div class="title_div">
    title
  </div>
  <div class="content_div">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th
  </div>
</div>

Демо здесь

Answer 3

<script type="text/javascript>
$(".accordion h3").click(function(){
    $('.accordion h3').each(function () {
      $(this).next("div").slideUp('slow');
    }
    $(this).next("div").slideToggle("fast")
    .siblings("div:visible").slideDown("fast");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
});
</script>

Answer 4

 <div class="accordion">
<h3 class="accordion-title">Title</h3>
<div class="accordion-content">text</div>
</div>

<script type="text/javascript"> 
jQuery(document).ready(function($){
        $('.accordion-title').click(function(){
        $(this).parent().children('.accordion-content').slideToggle();
        $(this).toggleClass('open');
        });
}); </script>

Answer 5

В этом видео - http://tutsplus.com/lesson/events-201/ Джеффри Уэй создает простой Аккордеон, думаю, это может быть полезно для вас.