Javascript Toggle close other opened div

5/02/2022  •  336 views
 
<script>
$(document).ready(function() {
 $(".faq-question").click(function() {
 $(this).toggleClass('open');
 var $target = $(this).parent().next('.field-faq-answer').toggle();
 $('.field-faq-answer').not($target).hide();
 });
});
</script>

<style>
.field-faq-answer {
 display: none;
}

.faq-antwoord {
 border-bottom: 1px solid #ccc;
 margin-top: 10px;
 padding-bottom: 10px;
}

.faq-antwoord p {
 margin-bottom: 0px;
 padding-left: 10px;
 border-left: 2px solid #3395d3;
 margin-left: 10px;
}

.field-faq-question-first {
 border-top: 1px solid #ccc;
}</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
 <div class="field-faq-question field-faq-question-first">
 <h3 class="faq-question">
 Titel 1
 </h3>
 </div>
 <div class="field-faq-answer">
 <div class="faq-antwoord">
 <p>
 TEST 1
 </p>
 </div>
 </div>
</div>
<div class="faq-container">
 <div class="field-faq-question field-faq-question-first">
 <h3 class="faq-question">
 Titel 2
 </h3>
 </div>
 <div class="field-faq-answer">
 <div class="faq-antwoord">
 <p>
 TEST 2
 </p>
 </div>
 </div>
</div>
<div class="faq-container">
 <div class="field-faq-question field-faq-question-first">
 <h3 class="faq-question">
 Titel 3
 </h3>
 </div>
 <div class="field-faq-answer">
 <div class="faq-antwoord">
 <p>
 TEST 3
 </p>
 </div>
 </div>
</div>
 English / Indonesian