Супер-простое меню аккордеона с открытием/закрытием значка

Question

Я использую простой аккордеон, который отлично работает, единственная необходимость - показать открытую/закрытую иконку. Не знаю, как добавить/удалить класс в родительский элемент, который будет взаимодействовать с состоянием аккордеона, поэтому вам нужна ваша помощь.

<!-- JS --> 
<script type="text/javascript"> 
$(document).ready(function($) { 
$('#accordion').find('.accordion-toggle').click(function(){ 

    //Expand or collapse this panel 
    $(this).next().slideToggle('fast'); 

    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 

}); 
}); 
</script> 

<!-- CSS --> 
<style> 
.accordion-toggle {cursor: pointer;} 
.accordion-content {display: none;} 
.accordion-content.default {display: block;} 
</style> 

<!-- HTML --> 
<div id="accordion"> 
<h4 class="accordion-toggle">Accordion 1</h4> 
<div class="accordion-content default"> 
<p>Cras malesuada ultrices augue molestie risus.</p> 
</div> 
<h4 class="accordion-toggle">Accordion 2</h4> 
<div class="accordion-content"> 
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
</div> 
<h4 class="accordion-toggle">Accordion 3</h4> 
<div class="accordion-content"> 
<p>Vivamus facilisisnibh scelerisque laoreet.</p> 
</div> 
</div> 

Answer 1

Вы упоминали скрытие/показ значков, но в конце концов, вы действительно хотели руководство о том, как:

«добавить/удалить класс на родительский элемент, который будет взаимодействовать с аккордеоном состояние»

Поэтому я предполагаю, что вы намерены использовать классы для взаимозаменяемого отображения «спящего» и «расширенного» значка на выбранный родительский элемент.

EDIT: на основе вашего разъяснения я изменил код. Пожалуйста, смотрите пример кода ниже:

$(document).ready(function($) { 
 

 
//adds the "collapsed" class to each parent 
 
$('#accordion .accordion-toggle').addClass('collapsed'); 
 

 
$('#accordion').find('.accordion-toggle').click(function(){ 
 
    //Expand or collapse this panel 
 
    $(this).next().slideToggle('fast'); 
 
    
 
    //toggles between collapsed and expanded classes 
 
$(this).toggleClass('collapsed expanded'); 
 
    
 
    //removes any instance of "expanded" from the other parents and replace it with the "collapsed" class 
 
    $("#accordion .accordion-toggle").not($(this)).removeClass('expanded').addClass('collapsed'); 
 
    
 
    //Hide the other panels 
 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 
 

 
}); 
 
});

.expanded { 
 
    background:red; 
 
} 
 

 
.collapsed { 
 
    background:blue; 
 
} 
 
.accordion-content:not(.default) { 
 
    display:none; 
 
} 
 
h4 { 
 
    cursor:pointer; 
 
} 
 
/* the css below is unnecessary for the accordion, but just to prevent the vertical scrollbars from showing up using stackoverflow's code screen */ 
 
body { 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="accordion"> 
 
<h4 class="accordion-toggle">Accordion 1</h4> 
 
<div class="accordion-content default"> 
 
<p>Cras malesuada ultrices augue molestie risus.</p> 
 
</div> 
 
<h4 class="accordion-toggle">Accordion 2</h4> 
 
<div class="accordion-content"> 
 
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
</div> 
 
<h4 class="accordion-toggle">Accordion 3</h4> 
 
<div class="accordion-content"> 
 
<p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
</div> 
 
</div>