Uitklapmenu's maken met javascript

In dit voorbeeld bouwen we uitklapmenu's met javascript. Om de inhoud van de webpagina overzichtelijker te maken, verbergen we de inhoud van de artikels. Wanneer de gebruiker op de titel klikt, wordt de inhoud van het artikel zichtbaar. De andere artikels worden op dat moment verborgen.

1. HTML-artikels maken

In eerste instantie bouwen we een aantal artikels (nieuwsberichten) in onze webpagina. Je kan het aantal artikels nadien nog steeds uitbreiden. De bedoeling is dat de code (die we verderop zullen schrijven), blijft functioneren. 

Ik ga er in het voorbeeld vanuit dat je cssbib.css/skeleton.css gebruikt. We geven de id "krant" aan het onderdeel waar we de artikels willen zichtbaar maken en laten open- en dichtklappen.

<div class="container">
        <div class="row">
                 <div class="twelve columns" id="krant">
                           Hier komen onze artikels
                 </div>
        </div>
</div>

Nu voegen we artikels toe...

We stellen een artikel samen uit een titel en een <div>-element waarin we alinea's en afbeeldingen enz. kunnen plaatsen.

<article>
          <h1>Hier komt de titel van het artikel</h1>
          <div class="artikelInhoud">
                       <p>Een alinea met tekst</p>
                       <p>Nog een alinea met tekst...</p>
          </div>
</article>

Je plaatst die artikels (het aantal bepaal je uiteraard zelf, in het element met id "krant".

<div class="container">
        <div class="row">
                 <div class="twelve columns" id="krant">
                         <article>
                                    <h1>Hier komt de titel van het eerste artikel</h1>
                                    <div class="artikelInhoud">
                                            <p>Een alinea met tekst</p>
                                            <p>Nog een alinea met tekst...</p>
                                     </div>
                          </article>
                          <article>
                                    <h1>Hier komt de titel van het tweede artikel</h1>
                                    <div class="artikelInhoud">
                                            <p>Een alinea met tekst</p>
                                            <p>Nog een alinea met tekst...</p>
                                     </div>
                          </article>
                 </div>
        </div>
</div>

2. CSS

We voorzien nu wat opmaak in ons CSS-bestand.

#krant{
           background-color:white;
           border:1px solid #ccc;
           box-shadow: 6px 6px 5px -2px rgba(204,204,204,0.7);
}
#krant article{
           border-top:1px solid #ccc;
           padding:0;
           margin:0;
}
#krant article h1{
           font-size:1.2em;
           display:block;
           padding:3px;
           cursor:pointer;
           margin-left:15px;
}

.artikelInhoud{
           padding:10px;
           border-top:1px solid #ccc;
           display:none;
}

3. jQuery integreren

De code die we gaan schrijven is gebaseerd op jQuery. Je moet dus ook eerst de jQuery-bibliotheek koppelen aan je pagina. 

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

4. Onze code toevoegen

We  voegen nu een <script>-tag toe net boven de sluittag van het body-element. 

<script>
</script>

De code mag pas uitgevoerd worden, als de pagina volledig is geladen in de webbrowser. In jQuery doen we dit als volgt:

<script>
$(document).ready(function(){
    //hier komt de code
});
</script>

Als een bezoeker van de website op de titel van een artikel klikt, dan schuift de inhoud van het artikel open. Alle andere artikels schuiven dan weer dicht. 
We selecteren ($) alle titels (h1) die we vinden in de het element met id "krant". De "onclick"-gebeurtenis zorgt dat er een opdracht (function) zal uitgevoerd worden.

<script>
$(document).ready(function(){
      $("#krant").find("h1").on("click",function(){
           //hier schrijven we wat er moet gebeuren...
      });
});
</script>

Nu kunnen we de browser vertellen wat hij moet doen als iemand op een titel klikt. In de eerste plaats schuiven we alle artikels dicht (in het geval er nog eentje open zou staan). In de tweede plaats schuiven we het artikel dat meteen onder "deze" ( $(this) ) titel staat, open. 

<script>
$(document).ready(function(){
    $("#krant").find("h1").on("click",function(){
        $(".artikelInhoud").slideUp();
        $(this).next(".artikelInhoud").slideDown();
    });
});
</script>

^{Kris Merckx - 2017}

Het eindresultaat