本当にたった1行で開閉型のFAQのプログラムが書けるのですか？

 これはjQueryを使用しているのですか？

 1行しか書かないのに複数個所で機能するのはなぜですか？

 他の方法もあるのですか？

 カスタマイズすることも可能ですか？

<dl class="faq">

<dt>1問目の質問</dt>

<dd>1問目の回答</dd>

<dt>2問目の質問</dt>

<dd>2問目の回答</dd>

</dl>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<script>

    $(function(){

        $('.faq dt').on('click',function(){$(this).toggleClass('open')});

    });

</script>

<style>
/* faq

----------------------------------------------*/

dl.faq dt{

    color:#00f;

    text-decoration:underline;

   padding:0 0 .5em;

   margin:0;

   cursor:pointer;

}

 

dl.faq dd{

    border:1px solid #ccc;

    color:#333;

   padding:.5em 1em;

   margin:0 0 1em;

   border-radius:7px;

   display:none;

}

 

dl.faq dt.open + dd{

    display:block;

}

 

dl.faq dt:before{

    content:"Q.";

}

 

dl.faq dd:before{

    content:"A.";

    color:red;

}
</style>