When you press it again, you need to close it, in my case it opens again. How to prevent it?

$('.accordion_button').click(function(event) { $('.item_content').slideUp(200); $(this).next('.item_content').slideToggle(200); }); 
 .accordion_item{ border-bottom: 1px solid transparent; } .accordion_button a{ color:#fff; padding:0 15px; background-color: #0E6937; font-weight: bold; font-size: 16px; height: 40px; line-height: 40px; display: flex; align-items: center; } .item_content{ color: #fff; display: none; background: #237E4C; } .item_content ul{ margin: 0; } .item_content ul li a{ padding-left: 40px; color: #fff; line-height: 35px; font-weight: bold; font-size: 14px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion_list"> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span>My GoodGross </a> </div> <div class="item_content"> <ul> <li> <a href="#">My (company) profile</a> </li> <li class="extra"> <a href="#" class="toggle"> Contact info <span class="glyphicon glyphicon-chevron-down" style="margin-left:0.5rem;"></a> <ul class="list_toggle"> <li><a href="#">Address</a></li> <li><a href="#">Phone</a></li> </ul> </li> <li><a href="#">My PayPal account</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-envelope"></span>Messages </a> </div> <div class="item_content"> <ul> <li> <a href="#">My (company) profile</a> </li> <li class="extra"> <a href="#" class="toggle"> Contact info <span class="glyphicon glyphicon-chevron-down" style="margin-left:0.5rem;"></a> <ul class="list_toggle"> <li><a href="#">Address</a></li> <li><a href="#">Phone</a></li> </ul> </li> <li><a href="#">My PayPal account</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-user"></span>My Buying </a> </div> <div class="item_content"> <ul> <li> <a href="#">My (company) profile</a> </li> <li class="extra"> <a href="#" class="toggle"> Contact info <span class="glyphicon glyphicon-chevron-down" style="margin-left:0.5rem;"></span></a> <ul class="list_toggle"> <li><a href="#">Address</a></li> <li><a href="#">Phone</a></li> </ul> </li> <li><a href="#">My PayPal account</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-usd"></span>My Selling </a> </div> <div class="item_content"> <ul> <li><a href="#">Watching</a></li> <li><a href="#">Best offers</a></li> <li><a href="#">Active</a></li> <li><a href="#">Pending</a></li> <li><a href="#">History</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-cog"></span>Settings </a> </div> <div class="item_content"> <ul> <li><a href="#">Change Password</a></li> <li><a href="#">Edit Bank Account</a></li> <li><a href="#">Set a security question</a></li> </ul> </div> </div> </div> </div>

    2 answers 2

    For example:

     $('.accordion_button a').click(function(e) { // Клик на ссылку кнопки e.preventDefault(); // Запрещаем переход по ссылке var $this = $(this), item = $this.closest('.accordion_item'), // Находим пункт в котором кнопка находится content = item.find('.item_content'), // Находим контент именно внутри этого пункта contents = $('.item_content'); // Все контенты во всех пунктах if(!item.hasClass('open')){ // Если пункт не открыт (нет класса open) contents.slideUp(200); // Сварачиваем все контенты item.addClass('open').siblings().removeClass('open'); // Открываем необходимый пункт (добавляем класс open), все остальные закрываем (у всех остальных удаляем класс open) content.slideDown(200); // Показываем контент именно этого пункта } else { item.removeClass('open'); // Иначе у всех убираем класс open и все контенты убираем contents.slideUp(200); } }); 
     .accordion_item{ border-bottom: 1px solid transparent; } .accordion_button a{ color:#fff; padding:0 15px; background-color: #0E6937; font-weight: bold; font-size: 16px; height: 40px; line-height: 40px; display: flex; align-items: center; } .item_content{ color: #fff; display: none; background: #237E4C; } .item_content ul{ margin: 0; } .item_content ul li a{ padding-left: 40px; color: #fff; line-height: 35px; font-weight: bold; font-size: 14px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion_list"> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span>My GoodGross </a> </div> <div class="item_content"> <ul> <li> <a href="#">My (company) profile</a> </li> <li class="extra"> <a href="#" class="toggle"> Contact info <span class="glyphicon glyphicon-chevron-down" style="margin-left:0.5rem;"></a> <ul class="list_toggle"> <li><a href="#">Address</a></li> <li><a href="#">Phone</a></li> </ul> </li> <li><a href="#">My PayPal account</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-envelope"></span>Messages </a> </div> <div class="item_content"> <ul> <li> <a href="#">My (company) profile</a> </li> <li class="extra"> <a href="#" class="toggle"> Contact info <span class="glyphicon glyphicon-chevron-down" style="margin-left:0.5rem;"></a> <ul class="list_toggle"> <li><a href="#">Address</a></li> <li><a href="#">Phone</a></li> </ul> </li> <li><a href="#">My PayPal account</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-user"></span>My Buying </a> </div> <div class="item_content"> <ul> <li> <a href="#">My (company) profile</a> </li> <li class="extra"> <a href="#" class="toggle"> Contact info <span class="glyphicon glyphicon-chevron-down" style="margin-left:0.5rem;"></span></a> <ul class="list_toggle"> <li><a href="#">Address</a></li> <li><a href="#">Phone</a></li> </ul> </li> <li><a href="#">My PayPal account</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-usd"></span>My Selling </a> </div> <div class="item_content"> <ul> <li><a href="#">Watching</a></li> <li><a href="#">Best offers</a></li> <li><a href="#">Active</a></li> <li><a href="#">Pending</a></li> <li><a href="#">History</a></li> </ul> </div> </div> <div class="accordion_item"> <div class="accordion_button"> <a href="#"> <span class="glyphicon glyphicon-cog"></span>Settings </a> </div> <div class="item_content"> <ul> <li><a href="#">Change Password</a></li> <li><a href="#">Edit Bank Account</a></li> <li><a href="#">Set a security question</a></li> </ul> </div> </div> </div> </div> 

        $('.accordion_button').click(function(event) { $('.accordion_button').addClass('sleep'); $(this).removeClass('sleep'); $(this).next('.item_content').slideToggle(200); $('.accordion_button.sleep').next('.item_content').slideUp(200); });

      Assign the rest of the class the class 'sleep'. From the button on which we press we remove this class. Something like a boolean is obtained. Then we do slideUp() , for all translated into sleepers. Since the clicked element does not have this class, it does not fold ...

      • can show by example, please - Bekzod