Frage von Ezio999999, 99

Wie blende ich die Div-Box ein und aus?

Ich hätte mal ne Frage. Also ich bräuchte für meine Webseite ne Info-Box die sich ein und ausblenden lässt (wenn es geht wäre ein slide effekt schön muss aber nicht sein). Die sollte so funktionieren wie z.B. bei Facebook wenn man auf das Nachrichten Symbol klickt. Kilckt man drauf erscheit die Box und klickt man auserhalb der box verschwindet sie wieder. Bei mir darf die Position aber nicht absolute sein da ich die Box an mehreren Stellen brauche sozusagen universal.

Zum Auslösen der Funktion habe ich mir das ungefähr so vorgestellt:

<a href="#" onclick="Funktionsname">Infos <img alt="" src="IMG/arrow.png"></a>

(Das Bild ist einfach ein kleiner Pfeil der nach rechts zeigt der soll gedreht werden wenn die Infobox angezeigt wird)

Im Internet habe ich nicht wirklicch das gefunden was ich brauche also hoffe ich das mir hier jemand helfen kann. Danke!

Antwort
von Gaskutscher, 55

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

Kommentar von Ezio999999 ,

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)

Kommentar von Ezio999999 ,

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

Kommentar von Gaskutscher ,

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

Es wird einfach zwischen den beiden Zuständen gewechselt.

Kommentar von Ezio999999 ,

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

Kommentar von Gaskutscher ,

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

Kommentar von Ezio999999 ,

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


Kommentar von Gaskutscher ,
 <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?

Kommentar von Ezio999999 ,

meinen a-Tag(Info ) mit einem Bild drinnen

Kommentar von Gaskutscher ,

Kannst du den Quellcode posten?

Kommentar von Ezio999999 ,

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>
Kommentar von Ezio999999 ,

Das div steht auch gleich unter dem link

Kommentar von Gaskutscher ,
<a href="#" onclick="toggle_visibility('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>

So sollte es gehen. Du rufst beide Funktionen zusammen auf, das klappt nicht. Diese Funktion schaltet von unsichtbar auf sichtbar (und zurück):

toggle_visibility

Diese Funktion von sichtbar auf unsichtbar (und zurück).

toggle_invisibility

Ausschlaggebend ist, welchen Status das Element zuerst hatte. Nur eine Funktion aufrufen. :)

Kommentar von Ezio999999 ,

oh hmm da gabs wohl ein missverständnis ^^ alles klar funktioiniert jetz alles. :D vielen Dank für die Hilfe

falls du noch zeit (und natürlich noch lust hast weiterzuhelfen sofern du kannst) hast wüsstest du ne Idee wie ich das animieren kann das es so von oben nach unten slidet? :D

Kommentar von Gaskutscher ,
Kommentar von Ezio999999 ,

Alles klar vielen dank hast mir sehr geholfen :D

Ich wünsch die noch nen super abend ^^

Kommentar von Gaskutscher ,

Kein Problem, dafür ist ja »GuteFrage« da. :)

Keine passende Antwort gefunden?

Fragen Sie die Community