JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<p id="FAQ1" class="FAQ"><strong>Q1</strong></p>
<p class="ANS">A1</p>
<p id="FAQ2" class="FAQ"><strong>Q2</strong></p>
<p class="ANS">A2</p>
<p id="FAQ3" class="FAQ"><strong>Q3</strong></p>
<p class="ANS">A3</p>
<p id="FAQ4" class="FAQ"><strong>Q4</strong></p>
<p class="ANS">A4</p>
<p id="FAQ5" class="FAQ"><strong>Q5</strong></p>
<p class="ANS">A5</p>
<p id="FAQ6" class="FAQ"><strong>Q6</strong></p>
<p class="ANS">A6</p>
<p id="FAQ7" class="FAQ"><strong>Q7</strong></p>
<p class="ANS">A7</p>
<p id="FAQ8" class="FAQ"><strong>Q8</strong></p>
<p class="ANS">A8</p>
<p id="FAQ9" class="FAQ"><strong>Q9</strong></p>
<p class="ANS">A9</p>
<p id="FAQ_10" class="FAQ"><strong>Q10</strong><p>
<p class="ANS">A10</p>

CSS

.ANS{
    display:none;
}

JavaScript

$(document).ready(function() {
  $('.FAQ').on('click', function() {
    $(".ANS").not($(this).next('p')).hide();
    $(this).next('p').toggle();
  });
});