Accordeonmenu's

Een accordeonmenu bouwen met HTML, CSS en javascript

Bekijk een live voorbeeld op  https://www.leerschool.be/api/examples/accordeon.html

Voeg de onderstaande CSS-code toe aan je CSS-bestand:

.accordeon article{
     transition-timing-function: ease-in-out;
     overflow:hidden;
     border:1px solid black;
}
.accordeon article *{
     padding:20px;
}
.accordeon header{
     height: auto;
     background-image:none;
     display:flex;
     justify-content: flex-start !important;
     text-align:left;
     flex-direction:row;
     cursor:pointer;
     padding:13px;
}

.accordeonhidden{
     height:0px;
     animation: animHZero 2s;
}
.accordeonhidden2{
     height:0px;
}

.accordeonshow{
     height:300px;
     animation: animHeight 2s;
}

@keyframes animHZero{
     0% {
         height:300px;
     }
    
     100% {
         height:0px;
         display:none;
     }
}

@keyframes animHeight {
     0% {
         height: 0px;
         display:block;
     }

     100% { 
         height: 300px;
         display:block
     }
 }
    

Link het javascriptbestand 

De javascriptcode staat in een bestand op de website www.leerschool.be. Link het op de volgende manier door de onderstaande code te plakken in je HTML-pagina, net boven </body>.

<script src="https://www.leerschool.be/api/js/accordeon.js"></script>  
  

Het accordeonmenu toevoegen via HTML

Een accordeonmenu voeg je door een <section>-element toe te voegen aan je HTML-pagina. Dit element geef je de stijlklasse "accordeon". 

<section class="accordeon">
    
</section>

Vervolgens voeg je aan dat <section>-element meerdere onderliggende <section>-elementen toe. Elk van die onderliggende <section>-elementen bevat op zijn beurt 2 onderliggende elementen:

  • <header>: daarin plaats je de titel. Op dit element kan je klikken. 
  • <article>: de inhoud van dit element is initieel onzichtbaar. Wil je een bepaald element van bij het laden van de pagina zichtbaar maken dan geef je het de stijlklasse "accordeonshow". 
<section class="accordeon">
    <section>
        <header>
            <h3>Titel 1</h3>
        </header>
        <article class="accordeonshow">
            <p>Inhoud van accordeon-item</p>
            <p>Lorem ipsum dolor sit amet...</p>
        </article>
    </section>
    <section>
        <header>
            <h3>Titel 2</h3>
        </header>
        <article>
            <p>Inhoud van accordeon-item</p>
            <p>Lorem ipsum dolor....</p>
        </article>
    </section>
    <section>
        <header>
            <h3>Titel 3</h3>
        </header>
        <article>
            <p>Inhoud van accordeon-item</p>
            <p>Lorem ipsum dolor sit amet...</p>
        </article>
    </section>
</section>
Volgende pagina