[FRAGE-JS] Box mit klick auf DIV öffnen

Soll es ein Alert oder eine direkte HP Box sein?

Gruß

#Edit:

Ich denke du meinst ein Pulldown Menü das sich nur 1x öffnen lässt pro Seite.
Daher wird automatisch das 2 geschlossen wenn das 1 geöffnet wird.

Sollte es das sein, werde ich schauen was ich so finde.

Zitat von DCC

Eine direkte Box, unter den Begriff Pullbox finde ich nichts.

Mit freundlichen Grüßen,

Das was du meinst heisst auch "Pulldown Menü"

Gruß

Kannst du ganz einfach mit jQuery realisieren.

<script>var div = '#DivIdVonDerBoxDieGeöffnetWerdenSoll';$(function() {   $(div).hide();  $(div).click(function() { $(this).show(300); })});</script>

Nicht getestet.
Achtung: jQuery muss implementiert sein!

& ehm, Java ist nicht JavaScript.

Hier hast du deinen 1. 'Wunsch':

DIV_box_eins_oeffnen = Ist die Box wo "Öffnen" steht, Öffnet Box eins
DIV_box_eins = Ist die Box die darunter geöffnet wird, wenn man auf "Öffnen" klickt

<script type="text/javascript">
$( "#DIV_box_eins_oeffnen" ).click(function() {
$("#DIV_box_eins").fadeIn('slow');
});
</script>

Bei deinem 2. Wunsch versteh ich es nicht genau aber so könnte der Code aussehen:

DIV_box_zwei_oeffnen = Öffnet Box zwei
DIV_box_eins = Verschwindet
DIV_box_zwei = erscheint

<script type="text/javascript">
$( "#DIV_box_zwei_oeffnen" ).click(function() {
$("#DIV_box_eins").fadeOut('slow');
$("#DIV_box_zwei").fadeIn('slow');
});
</script>

Jetzt musst du noch im Header folgende CSS-Daten angeben:

#DIV_box_eins { display: none; }
#DIV_box_zwei { display: none; }

MfG
Nesquik

Wie wäre es mit diesem Beispiel ?
Die Logik dahinter ist einfach, dass man hier eine bestimmte Reihenfolge beachtet, heißt also Link 1 für Box 1 usw.
Bsp.(Ungetestet sollte aber laufen wenn ich kein syntax error reingeballert habe, ist übrigens meiner Meinung ein ziemlich einfacher Weg)

<div id="hauptbox">


<div class="menuForBox">


<ul>
<li class="BoxenOeffner">Öffne Box 1</li>
<li class="BoxenOeffner">Öffne Box 2</li>
<li class="BoxenOeffner">Öffne Box 3</li>
<li class="BoxenOeffner">Öffne Box 4</li>
</ul>


</div>
<div class="theBoxVonTheRockxD">


<div class="MaybeClosedBoxDiggah" style="display:block;">Haha ich bin SICHTBAR AHJA BOX 1</div>
</div>
<div class="MaybeClosedBoxDiggah" style="display:none;">ICH BIN BOX 2</div>
</div>
<div class="MaybeClosedBoxDiggah" style="display:none;">ICH BIN BOX 3</div>
</div>
<div class="MaybeClosedBoxDiggah" style="display:none;">JA ICH BIN DER LETZE DER BOXEN GANG</div>
</div>


</div>


</div>


<script>


window.addEventListener("DOMContentLoaded",function(){
	var BoxenOeffner = document.getElementsByClassName("BoxenOeffner"),
		BoxDieVlltGeschlossenIst = document.getElementsByClassName("MaybeClosedBoxDiggah");


	for(var i=0;i<BoxenOeffner.length;i++){
		var OpenBoxCount = 0;
		BoxenOeffner[i].onclick = function(){
			for(var pb = 0;pb<BoxenOeffner.length;pb++){
				if(BoxenOeffner[pb] == this){
					OpenBoxCount = pb;
					FuncBoxenOeffner(OpenBoxCount);
				}
			}
		}
	}
	function FuncBoxenOeffner(OpenBox){
		//Alle Boxen erstmal schön ausblenden..
		for(var b=0;b<BoxDieVlltGeschlossenIst.length;b++){
			BoxDieVlltGeschlossenIst[b].style.display = "none";
		}
		//Die gewünschte Box aber wieder einblenden es geht MEGA SCHNELL merkt man also nicht, dass was ausgeblendet wurde..
		BoxDieVlltGeschlossenIst[OpenBox].style.display = "block";
	}
});
</script>