# Text einblenden



## julai (20. Juni 2013)

Hallo,
ich habe leider gar keine IT/ Programmiererfahrung, soll aber für meinen Chef etwas einrichten. 
Und zwar soll ein Text mit Bild im Browser nur nach Wunsch eingeblendet werden. Also mit einem Klick auf ein "mehr" Feld o.ä. wodurch der Text dann dazwischen geschoben wird. Ich habe gelesen, dass geht mit CSS. Da ich aber absolut keine Ahnung davon habe brauche ich wirklich Hilfe, da ich zwar einige Sachen gefunden habe, aber nichts verstanden habe und auch keine Ahnung habe, WO z. B. ich diese ganze Sachen dann überhaupt eintragen muss, damit das Ganze funktioniert, das steht nämlich leider nie irgendwo 
Ich hoffe ihr könnt mir helfen! 
Und ja, mein Chef weiß, dass ich sowas nicht kann und er war der Meinung ich soll googlen wie es funktioniert usw. da alle anderen es auch nicht wüssten. Also bitte helft mir!

julai


----------



## Turbopage (20. Juni 2013)

Meinst du sowas?
http://hpbk-templateworld.de.tl/Aufklappbare-Texte.htm

Einfach Beschreibung durchlesen und dann sollte das auch ein Anfänger hinbekommen


----------



## julai (20. Juni 2013)

Vielen Dank!
Ich finde nur das "Eigene Seiten editieren" auch nicht! Ich bin so Computer-Unfähig ._.


----------



## tombe (20. Juni 2013)

Was sind das für Seiten die du da ändern sollst?

Kennst du dich soweit damit aus das du uns vielleicht den Teil/die Teile des Quellcodes zeigen kannst die es betrifft (oder eventuell auch die Domain)?

Dann wäre es wesentlich einfacher dir zu helfen.


----------



## julai (20. Juni 2013)

Ich habe es geschafft! Habe die Quelltextfunktion gefunden! Vielen, vielen Dank für den LinK!!


----------



## Turbopage (20. Juni 2013)

Super 

 Das mit "Eigene Seiten editieren" galt nur für die User von homepage-baukasten.de, aber der Code ist trotzdem brauchbar


----------



## hela (21. Juni 2013)

Hallo,

das lässt sich auch ohne die Javascript-Eventhandler realisieren, wenn man die CSS3-Pseudoklasse :checked verwendet.
Der Klapptext wird dazu mit einem DIV-Element umhüllt, das hinter eine INPUT-/LABEL-Kombination als nachfolgendes Geschwisterelement gesetzt wird. Das alles wird am besten noch mal in einen DIV-Block gepackt, der ein Klassenattribut erhält um den Inhalt entsprechend formatieren zu können:

```
<div class="klappText">
	<input id="inputID-1" type="checkbox" />
	<label for="inputID-1"></label>
	<div>
		<p> irgendwelcher Text ... </p>
		<p> usw.usf. </p>
	</div>
</div>
```
Das LABEL-Element ist leer und wird per CSS-Pseudoelement :before mit Inhalt versehen.

```
.klappText input {
	/* Ermöglicht Ansteuerung über Tastatur (HTab) */
	opacity: 0;
}
.klappText label {
	margin-left: -1.25em;
	color: blue;
	cursor: pointer;
}
.klappText input + label:before {
	content: '? mehr Text';
}
.klappText input:checked + label:before {
	content: '? weniger Text';
}
.klappText input:not(:checked) ~ div {
	display: none;
}
.klappText input:focus + label {
	/*  Markierung des fokussierten LABEL-Elements */
	background-color: blue;
	color: white;
}
```
Das INPUT-Element wird mit der OPACITY-Eigenschaft unsichtbar gemacht. Damit ist es im Markup noch vorhanden und kann somit noch über die Tastatur (Horizontaltabulator) angesteuert werden. Mit einem nagativen MARGIN-Wert kann dann das LABEL-Element über das unsichtbare INPUT-Element geschoben werden.

Entsprechend dem checked-Zustand des INPUT-Elements werden dann die nachfolgenden Geschwisterelemente (LABEL und DIV-Block mit Klapptext) formatiert.

Das funktioniert in allen modernen Browsern, im Internet-Explorer allerdings erst ab v9. Für alle Internet-Explorer mit kleinerer Versionsnummer kann mit Hilfe eines "Conditional Comment" das INPUT- und das LABEL-Element ausgeblendet werden, so dass in diesen Versionen der gesamte Text dargestellt wird. Gleiches sollte man übrigens auch für das Drucklayout realisieren.


```
<!--[if lt IE 9]>
<style type="text/css">
	.klappText input,
	.klappText label {
		display: none;
	}
</style>
<![endif]-->
```
Hier ein Beispiel dazu: http://jsbin.com/enucas/3


----------

