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.

Wat is JavaScript?
Wat is het verschil tussen Java & JavaScript?
Wat is Ajax?

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.

Gebruik:

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: Download deze code  File: voorb307.zip, 33 159 bytes.

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

 
terug

html-307; Laatste wijziging: 29 april 2020