Accordeon - vraag klapt open maar verdwijnt

Probleem

We hebben nu al de Accordeon - html indeling en de Accordeon - html indeling en tekst. Maar we zien nog steeds alle vragen en alle antwoorden. We moeten de CSS nu zo wijzigen dat we alleen de vragen zien als de bezoeker voor de eerste keer op deze pagina komt. Verder moet het antwoord van de vraag waarop de bezoeker geklikt heeft getoond worden. Klikt de bezoeker op een andere vraag moet het antwoord op die vraag getoond worden en het antwoord op de vorige vraag verborgen worden.

Design

We moeten een techniek toepassen waarbij de antwoorden verborgen worden wanneer de pagina voor het eerst geladen wordt in de browser. Dat kunnen we door het display attribuut van het antwoord element op none te zetten. Het antwoord staat in body article section div:

article section div {
  display: none;
}

Alleen als het antwoord het doel wordt van de gebruiker, d.w.z. wanneer de gebruiker op de vraag klikt, moet het antwoord getoond worden. Dat doen we als volgt:

1. We nummeren de antwoorden door aan het id attribuut van het div element waarin de vraag staat een waarde toe te kennen: <div id="Q1">. We doen dat voor alle vier de vragen.
2. We maken van de vraag een hyperlink (klikbaar) door de vraag in een a-element te plaatsen. In het href attribuut voegen we de id waarde toe van het element dat de target van de hyperlink vormt, namelijk de id van div waarin het antwoord op de vraag staat:
   <a href="#Q1">Wat had de man verkeerd gedaan? </a>
3. Als de pagina geladen wordt, verbergen we de div's met de antwoorden erin. Dat doen we met de volgende CSS:
   article section div {
display: none;
}
4. Als de gebruiker op de vraag klikt, die een hyperlink is, moet het antwoord op die vraag getoond worden. Daarvoor gebruiken we de target pseudo-selector:
   article section div:target {
display: block;
}
   Daarmee geven we aan dat als de div, met het antwoord erin, de target wordt van een hyperlink, die getoond moet worden. Dus als bezoeker op de vraag klikt spring hij naar het antwoord en wordt dat antwoord zichtbaar gemaakt. Door te springen naar het antwoord verdwijnt de vraag, die er boven staat, uit het beeld. Om dit te vermijden moeten we de code aanpassen zodat er naar de vraag gesprongen wordt en het antwoord getoond wordt. Dat zien we in .

Oplossing

See the Pen accordeon krant maar vraag verdwijnt by Jef Inghelbrecht (@jef) on CodePen.