Terug

Collapse-plugin

Met de collapse-plugin bouw je in een oogwenk een uitklapbare lijst met artikels.

Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/papercollapse.php

1. Integreer jQuery in je webpagina

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

2. Integreer de plugin.

Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.

<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v12"></script>

3. De HTML-structuur

In de eerste plaats moet u de benodigde HTML-structuur voorzien in je webpagina. We maken een <div>- of <section>-element met daarin een aantal <article>-elementen. Elk <article> bevat twee <div>-elementen. Eentje met de class "articletitle", eentje met de class "articlecontent". In "articletitle" schrijft u de titel van het artikel, in "articlecontent" de inhoud van het artikel (tekst, foto's, films...).

<div class="mypaper">
      <article>
         <div class="articletitle"><h3>Artikel 1</h3></div>
         <div class="articlecontent">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </article>
      <article>
         <div class="articletitle"><h3>Artikel 2</h3></div>
         <div class="articlecontent">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </article>
      <article>
         <div class="articletitle"><h3>Artikel 3</h3></div>
         <div class="articlecontent">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
     </article>
</div>

4. Het script invoeren

Hiervoor voeg ik het volgende script toe net boven </body> in mijn webpagina. In het bovenstaande voorbeeld geven we aan de "wrapper" de class "mypaper". In onze javascript/jquery-code selecteren we nu het element ".paper", en we starten de plugin met de opdracht "papercollapse()".

<script>
$(document).ready(function(){
    $(".mypaper").papercollapse();
});
</script>

De plugin voegt ook de noodzakelijk CSS-code automatisch toe aan de pagina.

5. Opties

Ook bij deze plugin kan u een aantal opties instellen.

<script>
$(document).ready(function(){
       $(".mypaper").papercollapse({
                iconOpen:'<i class="fa fa-caret-right" aria-hidden="true"></i>',
                iconClose:'<i class="fa fa-caret-down" aria-hidden="true"></i>',
                allowmultiple:false,
                titleElementClass: "articletitle",
                contentElementClass: "articlecontent",
                childelement: "article",
                showfirst: false
       });
});
</script>

*Optie*	*Doel*	*Waarde*	*Standaard*
iconOpen	Een icoontje weergeven om duidelijk te maken dat je het element kan openklikken.	Font Awesome Icons	(geen)
iconClose	Een icoontje weergeven om duidelijk te maken dat je het element weer kan dichtklikken	Font Awesome Icons	(geen)
allowmultiple	Bij de waarde "true" kunnen meerdere artikels open staan. Bij de waarde "false" gaan de andere artikels dicht als je er één openklikt.	true, false	true
titleElementClass	De stijlklasse voor de titels van de artikels.	(vrije keuze: enkel tekens van a - z)	.articletitle
contentElementClass	De stijlklasse voor de inhoud van de artikels	(vrije keuze: enkel tekens van a-z)	.articlecontent
childelement	De artikels die je wil open en dichtklikken. Welk HTML-element?	article, div, li...	article
showfirst	Standaard het eerste artikel in de lijst openen.	true, false	true