Developen

Hier ga ik uitleggen hoe ik het accordion menu dat ik heb in elkaar zit.

HTML

In de HTML code hierboven is de code te zien die ik heb gebruikt om het accordion te laten zien. Het accordion bestaat eigenlijk gewoon uit 2 buttons met een panel er onder, In de buttons word de naam van het menu aangegeven en in de Panels staat de daadwerkelijkle informatie.

CSS

Hier boven staat alle CSS die ik heb gebruikt voor mijn accordion menu. Boven aan staat het accordion menu zelf en beschrijf ik hoe die er uit moet zien. Vervolgens staat er een active versie, dat houdt in dat hij van kleur veranderd als hij openstaat. Helemaal onderaan bschrijf ik de panel, dat is waar de informatie uiteindelijk in getoond word.

Javascript

In de javascript begin ik met het aanmaken van een variable voor het accordion menu, vervolgens maak ik met een if else statement het menu. Dit houdt in dat als er geklikt word dat hij dan opengaat en zo niet dat hij dan niet zichtbaar zal zijn (oftewel dicht zou staan).