Wie blende ich die Div-Box ein und aus?

...komplette Frage anzeigen

1 Antwort

Mit JavaScript ist dies möglich. Als Beispiel den Quellcode anschauen. Relevante Passage:

onclick="toggle_visibility(..)"

als Event beim Link, welcher angeklickt wird.

JavaScript dazu:

	<!-- toggle visibility -->  
<script type="text/javascript">
//<![CDATA[
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
//]]>
</script>

<!-- toggle invisibility -->
<script type="text/javascript">
//<![CDATA[
<!--
function toggle_invisibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
//]]>
</script>

Beispiel wo ich es verwende:

http://www.600ccm.info/1/1/X_FISH

Antwort bewerten Vielen Dank für Deine Bewertung
Ezio999999 23.05.2016, 20:41

Erstmal vielen Dank für die schnelle Antwort aber irgendwie funktionierts nicht. :( Zudem verstehe ich nicht ganz wie toggle_invisibility(id) zum einsatz kommt, denn die Funktion wird ja nicht aufgerufen (soweit ich das sehe)

0
Ezio999999 23.05.2016, 20:43
@Ezio999999

ok das mit dem funktionseinsatz hab ich wohl verpennt ^^ einfach beide ins Event reinschreiben

0
Gaskutscher 23.05.2016, 20:44
@Ezio999999

Wollte gerade schon oben antworten, aber du hast es ja gefunden.

Es wird einfach zwischen den beiden Zuständen gewechselt.

1
Ezio999999 23.05.2016, 20:46
@Gaskutscher

dennoch funzt das nicht beziehungsweise wird mein div mit dem text nicht angezeigt leider

0
Gaskutscher 23.05.2016, 20:48
@Ezio999999

Du hast überall die richtige id verwendet? Aufruf und id vom div sind identisch?

1
Ezio999999 23.05.2016, 20:53
@Gaskutscher

das div hat die id infobox und in der funktion steht halt infobox wenn ich dem div die eigendschaft display none wegnehme und auf den link klicke ist das div verschwunden drück ich aber noch einmal rauf kommt es nicht wieder


0
Gaskutscher 23.05.2016, 21:00
@Ezio999999
 <div style="float:right;"><a onclick="toggle_visibility('past');
toggle_visibility('pastless');
toggle_invisibility('pastmore')">
<img id="pastmore" style="cursor:pointer;"src="/images/text_more.png" height="23px" width="23px" alt="Text ausklappen" >
<img id="pastless" style="display: none; cursor:pointer;" src="/images/text_less.png" height="23px" width="23px" alt="Text einklappen" >
</a></div>

Per Klick wird  zwischen den img »pastmore« und »pastless« gewechselt. Zusätzlich wird »past« ein- oder eben ausgeblendet.

Was verwendest du als Link bzw. zum Anklicken?

1
Ezio999999 23.05.2016, 21:08
@Gaskutscher

klar

der a-tag steht zwar schon oben aber hier nochmal:

<a href="#" onclick="toggle_visibility('infobox'); toggle_invisibility('infobox');">Infos <img alt="" src="IMG/arrow.png"></a>

und hier die "Infobox"

<div id="infobox" class="infobox">
<p>blablabla</p>
<p>blalbalba</p>
</div>
0

Was möchtest Du wissen?