Dérouler du texte sur une page php

Bonjours,
voila j'ai une page html statique toutes les données sont déja de-dont et voila bon voila la page pour mieux comprendre :

<div class="row">

      <h1 class="titreH1"><strong>Comment ça marche?</strong></h1>
      <section>
       <h2 class="titreH2" id="tarifProd">Nos produits et tarifs :</h2>
        <p></br>shdoifhsdhlfhlsdhlkfhlsdhflkhsqlkhflhslkfhlkshflksqlfhlksqhflksqhflkkh</p>
       <h2 class="titreH2" id="detailLiv">Les délais de livraison :</h2>
        <p>hdfqshfohdfhsdhfjklhsldhfhlsdflnh</p>
       <h2 class="titreH2" id="paiment">Paiement :</h2>
        <p></br>kqdgiusgfiuqsuihfuifhsihofhosifoshofhoishiofoisfoisofjsodjfosdjofjosd</p>
       <h2 class="titreH2" id="avance">Comment verser une avance sur un produit ? :</h2>
        <p>ihsdifhiodfhiohdfoihdsoifhoihfoihsoihfoishfoihsofhfohfoho</p>
         <ul> 
          <li><p>osdfhoidhfosdjofijosdofjiojdsoifjiojsoijfoijoisdjfoisdoifjosdijfo</p></li> 
          <li>qskohfohosqhfohoishfoihsoihfoihsooifhsoiqhfioshfiohsdoifhoisdhfiohsiofhiosoifh</p></li> 
         </ul>
        <p>osduhioufqhdofhosdhofhosdhoifhodshoifhoishoifhoshoifhioshfoshfosihfoi</p> 
       <h2 class="titreH2" id="fraisLivraison">Fraie de livraison :</h2>
        <p>iqsgdfiugsifughuifhuisqhfoihsioqhfoioqshfoihsoifhoisqfhsqofihoqfhsoqfhso</p>
       <h2 class="titreH2" id="garantie">Garantie :</h2>
        <p>hqiushifuhiouhfoihoisqhofioishfoihosqhfoihosqifhoisqhfiosdhiofhsdoifhosdifhoisdhfoi</p>
        <p class="remer">lsfsqiofhiosioqjfijsoqifiosiohfoihsioqhfoihsqpoifhsqiofhiopsqhfoisqhfoihfio </p>
      </section>
     </div>

bon comme vous pouvais le voire c'est juste des paragraphes avec des titre h2 voila j'aimerais qu'un paragraphe ne s'affiche que lorsque en clique sur son titre (avec un petit + ) comme une arborescence tu clique sur le titre et le paragraphe en ce déroulant dans la même page bien sur voila un exemple en photo



après cela tu clic est :



EDIT : Ajout du LANGAGE dans les balises de code.