Закройте другие панели, когда одна из панелей открыта в аккордеоне

Question

Как закрыть все панели в аккордеоне, когда открылась одна из панелей? Моя панель Аккордеон все еще открыт. Ожидание - когда я нажимаю на панель, другая панель автоматически закрывается.

Это мой HTML, CSS и JS

$(".acitemx h3").click(function() { 
 
    $header = $(this); 
 
    $content = $header.next(); 
 
    $content.slideToggle(500, function() { 
 
    $(this).parent().toggleClass('current'); 
 
    }); 
 
}); 
 
$('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block');

/* accordion editing */ 
 

 
.accx { 
 
    background: #FFF none repeat scroll 0% 0%; 
 
    padding: 15px; 
 
    display: none; 
 
} 
 
.acitemx { 
 
    margin-bottom: 10px; 
 
    box-shadow: 0px 0px 2px 0px rgb(189, 189, 189); 
 
} 
 
.acitemx h3 { 
 
    cursor: pointer; 
 
    background: #00ADEF none repeat scroll 0% 0% !important; 
 
    color: #FFF !important; 
 
    font-family: "roboto", sans-serif; 
 
    font-weight: bold; 
 
    padding: 8px 40px 8px 15px !important; 
 
    position: relative; 
 
    border-radius: 3px 3px 3px 3px; 
 
} 
 
/* end accordion editing */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="accordionx"> 
 
    <div class="acitemx"> 
 
    <h3>First Panel</h3> 
 
    <div class="accx"> 
 
     This is the content 
 
    </div> 
 
    </div> 
 
    <div class="acitemx"> 
 
    <h3>Second Panel</h3> 
 
    <div class="accx"> 
 
     This is the content 
 
    </div> 
 
    </div> 
 
    <div class="acitemx"> 
 
    <h3>Third Panel</h3> 
 
    <div class="accx"> 
 
     This is the content 
 
    </div> 
 
    </div> 
 
</div>

Это ссылка JSFiddle http://jsfiddle.net/bupd32rq/3/

Спасибо за вашу помощь :)

Answer 1

Вы можете использовать функцию slideUp() после нахождения других братьев и сестер accx элемент.

$(this).parent().siblings().find('.accx').slideUp(); 

Не относится ответить: $('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block'); Здесь addClass не нужно иметь . и нет никакой логики, добавив еще один класс таким же именем, как у них уже есть свойства CSS набор.

JSfiddle demo

Фрагмент кода

$(".acitemx h3").click(function() { 
 
    $header = $(this); 
 
    $content = $header.next(); 
 
    $content.slideToggle(500, function() { 
 
    $(this).parent().toggleClass('current'); 
 
    }); 
 
    $(this).parent().siblings().find('.accx').slideUp(); // Added code 
 
}); 
 
$('.acitemx').eq(0).find('.accx').css('display', 'block');

/* accordion editing */ 
 

 
.accx { 
 
    background: #FFF none repeat scroll 0% 0%; 
 
    padding: 15px; 
 
    display: none; 
 
} 
 
.acitemx { 
 
    margin-bottom: 10px; 
 
    box-shadow: 0px 0px 2px 0px rgb(189, 189, 189); 
 
} 
 
.acitemx h3 { 
 
    cursor: pointer; 
 
    background: #00ADEF none repeat scroll 0% 0% !important; 
 
    color: #FFF !important; 
 
    font-family: "roboto", sans-serif; 
 
    font-weight: bold; 
 
    padding: 8px 40px 8px 15px !important; 
 
    position: relative; 
 
    border-radius: 3px 3px 3px 3px; 
 
} 
 
/* end accordion editing */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="accordionx"> 
 
    <div class="acitemx"> 
 
    <h3>First Panel</h3> 
 
    <div class="accx"> 
 
     This is the content 
 
    </div> 
 
    </div> 
 
    <div class="acitemx"> 
 
    <h3>Second Panel</h3> 
 
    <div class="accx"> 
 
     This is the content 
 
    </div> 
 
    </div> 
 
    <div class="acitemx"> 
 
    <h3>Third Panel</h3> 
 
    <div class="accx"> 
 
     This is the content 
 
    </div> 
 
    </div> 
 
</div>