Bereiche anzeigen und ausblenden mit :target

open / Einblenden

Wir haben hier 3 section Abschnitte mit jeweils einem div am Ende, welches ein und ausgeblendet werden kann.
Im letzten Abschnitt unter weiterlesen kann man den HTML-Code eines Abschnitts einblenden.
Der Aufbau der Abschnitte wird in diesem Pseudocode dargestellt.

<section>
<p>Absatz</p>
<a class="open" id="info1" href="#info1">weiterlesen></a>
<a class="close" id="close1" href="#close1">schließen></a>
<div> Ein Abschnitt, der ein- und ausgeblendet werden kann.</div>
</section>

Die CSS Lösung ist sehr elegant, weil sie für alle Abschnitte funktioniert. Allerdings brauchen die Links (weiterlesen, close) jeweils eine ID und eine Klasse.

Hier haben wir einen Link der quasi auf sich selbst springt. Im "weiterlesen" a-Element befinden sich folgende Attribute:
< a href="#info" id="info" class="open" >weiterlesen </a>.
Das bedeutet, sobald man darauf klickt, greift der .open:target Seletor. Siehe nach dem Klick die Adresszeile im Browser.

weiterlesenschließen 
.open:target~div {
    display: block;
}

Das ~ Element ist der Geschwisterselektor, also wird das div Element, welches auf den "weiterlesen" Link folgt, eingeblendet, sobald der .open:target Selektor greift.

Nach dem "weiterlesen" Link befindet sich der "schließen" Link mit der class="close". Auch dieser sollte angezeigt werden, wenn .open:target greift.

          .open:target~.close {
            display: inline-block;
        }

close / Ausblenden

Bevor man etwas einblendet, muss man erstmal etwas ausblenden.

weiterlesenschließen

Beim Start wird der "schließen" Link mit der class="close" und die darauf folgenden div Abschnitte ausgeblendet. Desweiteren sollte auch der "weiterlesen" Link ausgeblendet werden, wenn der .open:target Selektor greift.

        .close~div,
        .close,
        .open:target {
            display: none;
        }

Weitere Abschnitte & HTML Code

Für die weiteren Abschnitt muss man die .open Links jeweils mit einer anderen Id ausstatten und auch jeweils mit einem Verweis auf diese id.
< a href="#info2" id="info2" class="open" >weiterlesen </a>

weiterlesenschließen

Zum einen darf man eine id nur einmal verwenden und außerdem braucht man eine eindeutige Identifizierung des Bereichs, der eingeblendet werden soll.

HTML

<section>
    <h2>Weiter Abschnitte</h2>
    <p>Für weitere......</p>
    <a href="#info3 class="open" id="info3">weiterlesen</a>
    <a href="#close3" class="close" id="close3">schließen</a>
    <div>Der Text der ein und ausgeblendet wird</div>
    </section>