I have a Q&A section with multiple stacked boxes. I noticed that opening all the boxes made the page too long, so I'm exploring if JavaScript or jQuery can help limit the number of active boxes.
$(document).ready(function() {
$(".faqOuter").click(function() {
$(this).toggleClass('faqOuter-change');
$(this).parent().find('.faqInner').slideToggle(500, 'swing');
if ($(this).parent().height() == 75) {
$(this).parent().animate({
height: '225'
}), 500, 'swing';
} else {
$(this).parent().animate({
height: '75'
}), 600, 'swing';
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="faqSection">
<div class="faqSectionSub">
<h4 class="faqOuter">Trial One Bar</h4>
<div class="faqInner">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
</div>
</div>
<div class="faqSectionSub">
<h4 class="faqOuter">Trial One Bar</h4>
<div class="faqInner">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
</div>
</div>
<div class="faqSectionSub">
<h4 class="faqOuter">Trial One Bar</h4>
<div class="faqInner">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
</div>
</div>
<script src="scripts.js"></script>https://i.sstatic.net/EzbGn.jpg
How can I make sure only one box is displayed at a time?