Accordeon-content II: aanpak met jQuery

Hieronder zie je een drietal vragen. Als je er op klikt krijg je een antwoord met uitleg. De beweging is vloeiend, niet schokkerig of abrupt.

Op deze pagina wordt beschreven hoe je dat kunt aanpakken. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Het voorbeeld is een vereenvoudigde bewerking van een versie die ik aantrof op de site Dynamic Drive. Die site bestaat inmiddels niet meer. Het originele script is daardoor niet meer beschikbaar.

• Op de werking van het script wordt hier niet ingegaan. Die is te ingewikkeld om in een redelijk kort verhaal te beschrijven.

Inbouwen in je eigen website gaat als volgt:
• Zoals de titel al doet vermoeden wordt hier jQuery ingezet. Dat is een verzameling JavaScript functions ("platform"), die je een heleboel dingen uit handen nemen, waaronder het netjes laten bewegen van de koppen en de tekst.
• Je hebt van JQuery versie 1.4.2 of hoger nodig. Je kunt de nieuwste versie downloaden van jQuery.com. Versie 1.4.2 tref je ook aan in de downloadfile.
  Het is file jquery-1.4.2.min.js.
   
• Je kunt versie 1.4.2 ook direct linken vanuit de API-bibliotheek van Google.
  Daarvoor gebruik je de code in de HEAD van je document:
  <script type="text/javascript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
• Het spreekt voor zich dat het bestand met de jQuery-bibliotheek niet hoeft te worden veranderd.
   
• De JavaScript functions die het openen en sluiten van de contentblokken regelen maken gebruik van jQuery. Ze staan in de file ddaccordion.js. Ook dit bestand vind je in de downloadfile. Het behoeft geen wijziging.
• De file ddaccordion.js bevat AJAX-technologie. Veel ervan wordt niet gebruikt in het voorbeeld op deze bladzijde. De overbodige zaken zitten niet in de weg, daarom heb ik ze laten staan. Allen de laatst regel code (image-preloading) heb ik uitgeschakeld. De uitgebreide voorbeelden op Dynamic drive gebruiken de AJAX-technieken wel!
   
• Voor het opmaken van de koppen en de tekst bevat de HEAD een <style>-block met vier classes: decontent, technologie, opencontent en geslotencontent.
• De class decontent bevat de opmaak van de tekst.
• De class technologie bevat de opmaak van de koppen.
• De classes opencontent en geslotencontent regelen de kleur van de kop. Als het blok gesloten is, is de class geslotencontent actief. Als op de kop wordt geklikt wordt de class geslotencontent verwijderd en wordt de class opencontent actief gemaakt. Als er weer op de kop wordt geklikt wordt opencontent vervangen door geslotencontent.
   
• Voor de titel van een kop staat een . Als er op de kop wordt geklikt verandert dat in . Dit wordt gedaan door het plaatje accordeonplus.gif te vervangen door accordeonmin.gif. Het omgekeerde gebeurt bij het sluiten van het blok tekst.
  Dit wordt gedaan met dezelfde techniek als beschreven in het item "Plaatje laten veranderen als er op wordt geklikt", maar dan met jQuery veel compacter gepro­grammeerd.
   
• Het gedrag van de accordeon kan behoorlijk woren beïnvloed. Dat doe je door de instellingen voor het JavaScript-object ddaccordion (dat in ddaccordion.js staat) te definiëren in de method init. Het benodigde JavaScript staat in de HEAD.
• De instellingen wijzig je door het aanpassen van parameters in init, zie de tabel hieronder.
   

  Naam	Betekenis
  headerclass	Naam van de CSS-class van de koppen. Hier: "technologie"
  contentclass	Naam van de CSS-class van de tekst. Hier: "decontent"
  revealtype	Geeft aan wanneer de content zichtbaar moet worden. Geldige waarden zijn: "click", "clickgo" en "mouseover". Hier: "click" De waarde "clickgo" gedraagt zijn bij deze toepassing hetzelfde als "click".
  mouseoverdelay	Geeft aan hoe lang het programma moet wachten (in milisonden) met het zichtbaar maken van een blok content. Dit werkt alleen als revealtype="mouseover". Hier: 200
  collapseprev	Geeft aan of een eventueel open blok content moet worden gesloten voordat de de content zichtbaar wordt gemaakt. Geldige waarden zijn: true en false. Hier: true
  defaultexpanded	Geeft aan of er bij het openen van de pagina automatisch een blok moet worden geopend: 0 voor het eerste blok, 1 voor het tweede blok, 2 voor het derde blok, enz. [] betekent dat alle blokken gesloten zijn bij het openen van de pagina. Hier: []
  onemustopen	Geeft aan of er tenminste één blok open moet blijven staan. Het is dan niet mogelijk om alle blokken te sluiten. Geldige waarden zijn: true en false. Hier: false
  animatedefault	Geeft aan of er default animatie worden toegepast bij het openen van een blok. Geldige waarden zijn: true en false. false. Hier: false
  persiststate	Geeft aan of de status van het accordeon-blok moet worden onthouden tijdens de lopende sessie. Hier: false Dit gaat met een sessie-cookie. Het werkt dus niet in browsers die geen cookies toestaan.
  toggleclass	Namen van twee CSS-classes die worden gebruikt voor het opmaken van de koppen in gesloten resp. geopende toestand. Hier: ["geslotencontent", "opencontent"]
  togglehtml	Plaats en bestandsnamen voor de en de bij de kop. Geldige waarden voor de plaats zijn: "none" (geen plus en min), "prefix" (vóór de tekst) en "suffix" (na de tekst). Let daarbij op de spaties na de <img>-tags! Hier: ["prefix", "<img src='accordeonplus.gif'   style='width:13px; height:13px'> ",   "<img src='accordeonmin.gif'   style='width:13px; height:13px'> "]   Als je "none" gebruikt kun je de namen van de plaatjes weglaten.
  animatespeed	Snelheid van de animatie. Dit is een geheel getal (bijv.: 200) in milliseconden, of een van de keywords "fast", "normal", of "slow" (snel, normaal, langzaam). Hier: "normal"
  oninit	Hier kun je specifieke code plaatsen in de function(expandedindices). Deze function wordt uitgevoerd bij het initialiseren van het accordion-object. Als je dat niet nodig hebt / vindt geef je een lege functie-body op. Hier: function(expandedindices) {}
  onopenclose	Hier kun je specifieke code plaatsen in de function(header, index, state, isuseractivated). Deze function wordt uitgevoerd bij het openen of sluiten van een blok content. Als je dat niet nodig hebt / vindt geef je een lege functie-body op. Hier: function(header, index, state, isuseractivated) {}

   
• Tenslotte moet je de teksten met de bijbehorende koppen nog in de BODY van je document zetten. De code staat onderaan de pagina.

Gebruik:

• De code staat in de <HEAD>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>. Beschrijving van de items staat hierboven).

<script src="jquery-1.4.2.min.js"></script>
<script src="js/ddaccordion.js"></script>
<style>
.technologie{ cursor: pointer; font: bold 14px Verdana, Arial, sans-serif; margin: 10px 0; }
.opencontent { color: green; }
.geslotencontent { color: red; }
.decontent { color:maroon; }
</style>
<script>
//Initialiseer de demo:
ddaccordion.init({
headerclass: "technologie",
contentclass: "decontent",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: false,
toggleclass: ["geslotencontent", "opencontent"],
togglehtml: ["prefix", "<img src='accordeonplus.gif' style='width:13px; height:13px'> ", "<img src='accordeonmin.gif' style='width:13px; height:13px'> "],
animatespeed: "normal",
oninit: function(expandedindices){
// Hier doen we dus niets
},
onopenclose: function(header, index, state, isuseractivated){
// Hier doen we dus niets
}
})
</script>

(Zet dit in de <BODY>. De code is maar gedeeltelijk weergegeven. De volledige code zit in de downloadfile).

<div class="technologie">Wat is JavaScript?</div>
<div class="decontent">
JavaScript is een scripttaal die oorspronkelijk ontwikkeld is door NetScape, met als doel om interactiviteit toe te
voegen aan webdocumenten. Het wordt alleen op de PC en in de browser van de gebruiker gedraaid, hoewel er tegenwoordig ook
server-side toepassingen zijn.
</div>
<div class="technologie">Wat is het verschil tussen Java &amp; JavaScript?</div>
<div class="decontent">
  .
  .
</div>

Downloaden:
 
Druk op de knop:  File: voorb307.zip, 33 159 bytes.

Opmerking:
 
Een sterk vereenvoudigde versie van deze toepassing vind je in het item Accordeon content.