✔ Text aufklappen nach dem Anklicken

[Eagle-PsyX-]

Hi,

ich suche nach einem CSS-Befehle (ohne JS) womit ich durch das Anklicken eines Textes oder eines Bildes ein neuen (Text-)Bereich sichtbar machen will, ohne das die Seite neugeladen wird (ansonsten würd ich's mit PHP ja machen).

Also diesen Text hab ich gefunden:

.spoiler a {
  color: #000;
  text-decoration: none;
}

.spoiler a span {
  display:none;
}

.spoiler a:active span, .spoiler a:focus span {
  display: block;
}

Und der dazu pasasende HTML-Code:

<div class="spoiler">
        <a href="#">Aufklappen<span>Text wird bei Klick sichtbar</span></a>
    </div>

Nun mein Problem: Im Firefox 3 geht es, im IE6 überhaupt nicht. Und muss es ein "a"-Tag sein? Bzw. müssen es Links sein?

 

[Maik]

Hi,

erweiter diese Regel folgendermaßen, damit das Aufklappen ebenfalls im IE6 funktioniert:

.spoiler a:active span, .spoiler a:focus span {
  display: block;
  border:none;
}

oder so:

.spoiler a:active span, .spoiler a:focus span {
  display: block;
  background:none;
}

Ohne das a-Element wirst du dein Vorhaben im IE nicht umsetzen können - siehe Dynamische Pseudoklassen.

mfg Maik

 

[Eagle-PsyX-]

Hi Maik,

danke für den Tipp. Aber anscheinend klappt es nicht im IE6 bei mir.
Du kannst dir das Problem auf meiner Seite ansehen solange ich noch Online bin; was vermutlich noch lange bin.

Danke.

Mfg Eagle

 

[Maik]

Moin,

nimm mal folgende Änderungen im Stylesheet vor:

div.spoiler a:active, div.spoiler a:focus { /* Neu für IE6 */
  border:none;
  }

div.spoiler a:active span, div.spoiler a:focus span {
  display: block;
  /*border: none;*/ /* auskommentiert = deaktiviert */
  /*background:none;*/ /* auskommentiert = deaktiviert */
}

mfg Maik

 

[Eagle-PsyX-]

Super

Danke klappt wunderbar.

Ich bin mittlerweile kein so großer Grünschnabel mehr in Sache CSS; doch das ist für mich noch nicht nachvollziehbar

 

[KatjaNowak]

Diese Codes haben mir schon super geholfen. Ich würde gerne in den aufklappbaren Text einen Link integrieren. Das funktioniert im Moment so gar nicht. Hat jemand eine Idee? Katja

 

[Maik]

Hi,

Diese Codes haben mir schon super geholfen. Ich würde gerne in den aufklappbaren Text einen Link integrieren. Das funktioniert im Moment so gar nicht. Hat jemand eine Idee? Katja

Das wird so mit CSS nicht funktionieren.

Die Begründung kannst du in dem Thema Aufklappbares Menü vom gestrigen Tage nachlesen.

Zudem ist das Verschachteln von Links nicht zulässig - um beim eingangs gezeigten HTML-Code zu bleiben in dieser Art:

<div class="spoiler">
    <a href="#">Aufklappen
        <span>
             Text wird bei Klick sichtbar
             <a href="#">Link</a>
        </span>
    </a>
 </div>

mfg Maik

 

[KatjaNowak]

Schade, aber danke für den Hinweis!! Also nur über javascript realisierbar?

 

[Maik]

Richtig geschlußfolgert

Siehe z.B. http://www.stunicholls.com/various/more.html oder http://www.stunicholls.com/various/more_and_more.html.

mfg Maik