My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click.
Switching the display from flex to column fixes the issue, but I don't understand why it behaves differently in row mode. Can someone explain the logic behind this?
$(document).ready(function(){
$('.accordion-list > li > .answer').hide();
$('.accordion-list > li').click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active").find(".answer").slideUp();
} else {
$(".accordion-list > li.active .answer").slideUp();
$(".accordion-list > li.active").removeClass("active");
$(this).addClass("active").find(".answer").slideDown();
}
return false;
});
});
ul.accordion-list {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
height: auto;
padding: 20px;
margin: 0;
list-style: none;
background-color: #f9f9fa;
}
ul.accordion-list li {
position: relative;
display: block;
width: 100%;
height: auto;
background-color: #F36F20;
padding: 20px;
margin: 0 auto 15px auto;
border: 1px solid #eee;
border-radius: 5px;
cursor: pointer;
color: #fff;
}
ul.accordion-list li.active h3:after {
transform: rotate(45deg);
}
ul.accordion-list li h3 {
font-weight: 700;
position: relative;
display: block;
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0;
font-size: 15px;
letter-spacing: 0.01em;
cursor: pointer;
}
ul.accordion-list li div.answer {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
cursor: pointer;
}
ul.accordion-list li div.answer p {
position: relative;
display: block;
font-weight: 300;
padding: 10px 0 0 0;
cursor: pointer;
line-height: 150%;
margin: 0 0 15px 0;
font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion-list">
&l...