Accordeon - vraag klapt open en vraag blijft

Probleem

In Accordeon - vraag klapt open maar verdwijnt zijn we er gelukt om de vraag open te klappen en het antwoord te tonen maar de vraag zelf verdwijnt uit het beeld. We willen nu dat het antwoord getoond wordt maar de vraag zichtbaar blijft.

Design

In Accordeon - vraag klapt open maar verdwijnt hebben we van de vraag een hyperlink gemaakt die springt naar het antwoord en het antwoord zichtbaar maakt. We moeten van de vraag een hyperlink maken die springt naar zichzelf en het antwoord toont. Het antwoord staat direct onder de vraag en dus t.o.v. de vraag een adjacent sibling. We kunnen de adjacent sibling combinator selector gebruiken om de adjacent sibling van de vraag met CSS te wijzigen als er naar de vraag (article section header) gesprongen wordt:

article section header:target + div {
  display: block;
}

De hyperlink waarin de vraag staat passen we aan zodat er nu naar de vraag zelf gesprongen wordt:

<section>
        <header id="Q1">
            <h2>
                <a href="#Q1">
                    Wat had de man verkeerd gedaan?
                </a>
            </h2>
        </header>

Oplossing

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