Text "expandieren"

[Stephan]

Hallo,
ich weiß nicht, ob der Begriff expandieren korrekt ist für das folgende.
Wenn der Anwender auf "Nähere Informationen" klickt, wird zusätzlicher Text angezeigt.
Dies habe ich folgendermaßen gemacht:

a.text_expand {color:blue; text-decoration:none; outline-style:none;}  
a.text_expand em {color:#111111; font-style:italic; display:none;}  
a.text_expand:hover {text-decoration:none;}  
a.text_expand:active span, a.text_expand:focus span {display:none;}  
a.text_expand:active em, a.text_expand:focus em {display:block; width:100%; cursor:default;}

  
<a class="text_expand" href="#" onclick="this.hideFocus=true" onblur="this.hideFocus=false">  
<span>Nähere Informationen &nbsp;&nbsp;&nbsp;&#187;</span>  
<em>  
Zusätzlicher Text<br />  
.......  
</em>  
</a>  

Jetzt habe ich aber Text, der Block-Elemente enthalten soll, wie <ul> u.a.
Das geht natürlich nicht innerhalb vom em-Tag.
Andrerseits kann ich das em-tag nicht durch ein Block-Element ersetzen, da es innerhalb des a-tags steht.

Gibt es hierzu eine Lösung oder eine Alternative, Text zu "expandieren"?

[Take]

Moin,

Jetzt habe ich aber Text, der Block-Elemente enthalten soll, wie <ul> u.a.
Das geht natürlich nicht innerhalb vom em-Tag.
Andrerseits kann ich das em-tag nicht durch ein Block-Element ersetzen, da es innerhalb des a-tags steht.

Gibt es hierzu eine Lösung oder eine Alternative, Text zu "expandieren"?

Nimm das <em> aus dem <a> raus und pack ein div dahinter.
(<a href="#">bla</a><div>...</div>) Dann kannst du per http://de.selfhtml.org/css/formate/zentrale.htm#elemente_weitere@title=Nachbar-Selektor das div einblenden.

Gruß,
Take

[Stephan]

Hi,

Nimm das <em> aus dem <a> raus und pack ein div dahinter.
(<a href="#">bla</a><div>...</div>) Dann kannst du per http://de.selfhtml.org/css/formate/zentrale.htm#elemente_weitere@title=Nachbar-Selektor das div einblenden.

Das verstehe ich nicht. Wenn dann auf "bla" geklickt wird tut sich doch nichts.

[Take]

Moin,

Das verstehe ich nicht. Wenn dann auf "bla" geklickt wird tut sich doch nichts.

Allerdings. Komisch, bei mir hats vorhin im Test funktioniert, hab wahrscheinlich irgendwas falsch gemacht. Sorry, nimm Gunnars Lösung, die ist am Besten, im IE siehts halt dann doof aus, ohne JS. Aber wer IE Benutzer ist, hat auch keine Ahnung, wo man JS abstellt, von daher... :)

Gruß,
Take

[Gunnar Bittersmann]

@@Stephan:

nuqneH

<a class="text_expand" href="#" onclick="this.hideFocus=true" onblur="this.hideFocus=false">

Warum @href="#"? Willst du wirklich, dass beim Anklicken zum Seitenanfang geprungen wird?

<span>Nähere Informationen &nbsp;&nbsp;&nbsp;&#187;</span>

Die Zeichenfolge '&nbsp;&nbsp;&nbsp;' ist unsinnig. Abstände erzeugt man mit CSS.

'&#187;' sollte auch nicht im Quelltext stehen, sondern '»'. [ESCAPES]

Andrerseits kann ich das em-tag nicht durch ein Block-Element ersetzen, da es innerhalb des a-tags steht.

Die Pseudoklasse :hover lässt sich nicht nur bei 'a'-Elementen verwenden, sondern bei (fast) allen.* Du willst kein Link, du willst kein 'a'.

Sieh dir auch Ingo Turskis Infobox an.

Und wenn’s denn JavaScript sein soll: jQuery bietet tooltip().

Qapla'

* von veralteten IEs mal abgesehen.

[Stephan]

Hi,
danke für die Tipps.

Warum @href="#"? Willst du wirklich, dass beim Anklicken zum Seitenanfang geprungen wird?

Nein, aber was gebe ich an, wenn an der aktuellen Stelle verblieben werden soll?

Sieh dir auch Ingo Turskis Infobox an.

Ich möchte keine Infobox, sondern dass der Text eingefügt wird.

Und wenn’s denn JavaScript sein soll: jQuery bietet tooltip().

Nein, kein Javascript.
Danke

[Gunnar Bittersmann]

@@Stephan:

nuqneH

Warum @href="#"? Willst du wirklich, dass beim Anklicken zum Seitenanfang geprungen wird?
Nein, aber was gebe ich an, wenn an der aktuellen Stelle verblieben werden soll?

Kein @href. Oder @href="?".

Ich möchte keine Infobox, sondern dass der Text eingefügt wird.

Ähm ja, da steht’s ja: „Wenn der Anwender auf "Nähere Informationen" klickt“. Klickt, nicht hovert. Wer lesen kann, ist klar im Vorteil.

Wenn du doch gleich zu den näheren Informationen springen willst, bietet sich an:

<a href="#info">Nähere Informationen</a>  
  
<div id="info">  
  <p>Lorem ipsum dolor sit amet.</p>  
  <ul>  
    <li>foo</li>  
    <li>bar</li>  
  </ul>  
</div>

Im Stylesheet:

#info { display: none }  
  
#info:target { display: block }

[CSS3-SELECTORS §6.6.2, Meiert]

Dumm nur, dass IE das nicht kann.

Nein, kein Javascript.

?? Und was ist das: "this.hideFocus=true", "this.hideFocus=false"?

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

#info { display: none }

#info:target { display: block }

  
Oder stattdessen besser  
  
`#info:not(:target) { display: none }`{:.language-css}  
  
Dann wird die Zusatzinformation nur ausgeblendet, wenn der Browser fähig ist, sie auch einzublenden. In unfähigen Browsern wäre die Zusatzinformation halt immer zu lesen.  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[Stephan]

#info:target { display: block }[/code]

[CSS3-SELECTORS §6.6.2, Meiert]

Dumm nur, dass IE das nicht kann.

Ja, dumm, aber für den gibt es doch noch viele Anwender.
Ich würde daher gerne noch etwas googeln, aber mit welchen Begriffen?

Problem:
Aus
aaaaaaaa
    weiter >
bbbbbbbb

soll bei Klick auf "weiter >" werden

aaaaaaaa
xxxxxxxxxxxxxxxxx
yyyyyyyyyyyyyyyyy
zzzzzzzzzzzzzzzzz
....
bbbbbbbb

[Gunnar Bittersmann]

@@Stephan:

nuqneH

Ich würde daher gerne noch etwas googeln, aber mit welchen Begriffen?

Accordion.

Qapla'

[suit]

Und wenn’s denn JavaScript sein soll: jQuery bietet tooltip().

Stable ist 1.8.8; 1.9 ist noch Zukunftsmusik ;)

[molily]

Und wenn’s denn JavaScript sein soll: jQuery bietet tooltip().

Das ist jQuery UI (zumal Version 1.9, siehe suit). Das ist eine Interface-Bibliothek mit einem Haufen Widgets und Effekten, welche lediglich auf jQuery aufbaut und vollständig 209 KB umfasst (minified).

Mathias

[suit]

Und wenn’s denn JavaScript sein soll: jQuery bietet tooltip().

Das ist jQuery UI (zumal Version 1.9, siehe suit). Das ist eine Interface-Bibliothek mit einem Haufen Widgets und Effekten, welche lediglich auf jQuery aufbaut und vollständig 209 KB umfasst (minified).

Ich versteh' ohnehin nicht, warum die jQuery-UI-Doku so dämlich in die jQuery-Doku eingemischt ist - noch dazu Dokumentatationsseiten für künftige Versionen.

[Stephan]

Hallo,
hoffentlich liest es noch jemand von den Cracks!
Wenn man auf der Seite http://www.cssplay.co.uk/menu/more.html auf more klickt funktioniert dies in Firefox und Opera.
Nur selbst der aktuelle IE macht Probleme, wenn der Text aufgeklappt ist und man auf die Scrollbar drückt um den Text zu verschieben. Dann ist nämlich der Text wieder verschwunden.
Kennt Ihr hierfür eine Abhilfe?

[Stephan]

Sorry, muss korrigieren,
Fehler nur in IE7 und älter!