How can I achieve this code easier or with less lines of code?
I'm curious if it can be done easier and/or more efficently. Because I feel like there is too much repetition in this, so there must be an easy way.
And I'm not only planning to make 4 of this but like 20-30, so performance is a key aspect.

Jquery:

```
$( document ).ready(function() {
        $( "#q1" ).click(function() {
            $( "#a1" ).slideToggle( "slow", function() {});
            if ($(this).hasClass('on')){
                    $(this).removeClass('on');
            }else{
                $(this).addClass('on');
            }
        });
        $( "#q2" ).click(function() {
            $( "#a2" ).slideToggle( "slow", function() {});
            if ($(this).hasClass('on')){
                    $(this).removeClass('on');
            }else{
                $(this).addClass('on');
            }
        });
        $( "#q3" ).click(function() {
            $( "#a3" ).slideToggle( "slow", function() {});
            if ($(this).hasClass('on')){
                    $(this).removeClass('on');
            }else{
                $(this).addClass('on');
            }
        });
        $( "#q4" ).click(function() {
            $( "#a4" ).slideToggle( "slow", function() {});
            if ($(this).hasClass('on')){
                    $(this).removeClass('on');
            }else{
                $(this).addClass('on');
            }
        });
    });

```

HTML:

```
<div id="faq_content">
  <div class="faq_box">
    <div class="questions" id="q1">
      <span>xyz</span>
    </div>
    <div class="answers" id="a1">
      <span>xyz</span>
    </div>
  </div>
  <div class="faq_box">
    <div class="questions" id="q2">
      <span>xyz</span>
    </div>
    <div class="answers" id="a2">
      <span>xyz</span>
    </div>
  </div>
</div>

```