https://i.sstatic.net/QABff.jpgI am currently working on implementing an accordion using object-oriented JavaScript. The issue I am encountering is that the toggle functionality does not work when I click. The desired output is to display content and change the icon to a plus sign when clicked, while closing other child elements. Initially, the first child should be set as active.
As I have just started learning object-oriented JavaScript, I would appreciate any feedback or suggestions for improvement in my code.
Accordion = {
accordionContent: '.accordion-s1 .accordion--content p',
accordionTitle: '.accordion--title',
init: function() {
$(this.accordionTitle).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function() {
$(this.accordionContent).slideToggle();
$(this.accordionTitle).removeClass("active");
if($(this.accordionTitle).siblings().is(":visible")) {
$(this.accordionTitle).siblings().slideDown();
$(this).find('.fa.fa-times').toggleClass('plus');
$(this.accordionTitle).addClass("active");
}
}
}
$(document).ready(function(){
Accordian.init();
});.accordion-s1 .accordion--title {
display: flex;
flex-direction: row;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 300;
transition: all .25s ease;
background-color: #2783e8;
color: #ffffff;
}
.accordion-s1 .accordion--title h4 { flex:1;font-weight: 600;}
.accordion-s1 .aticon-times { padding: 5px;}
.plus {
transform: rotate(45deg);
transition: all .25s ease;
}
.accordion-s1 .accordion--content {
padding: 10px 20px;
background: whitesmoke;
}<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="accordion-s1">
<div class="accordion--single">
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
</span>
</div>
<div class="accordion--content">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p>
</div>
</div>
<div class="accordion--single">
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
</span>
</div>
<div class="accordion--content">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p>
</div>
</div>
</div>