Auf- und zuklappen von divs!

K

Kaiser_Franz

Grünschnabel
Hallo Leute,

habe folgendes Problem:

Habe drei Buttons die jeweils eine geschlossenes div öffnen. Das funktioniert auch soweit. Jetzt will ich es aber schaffen, dass wenn div1 offen ist, das es sich schließt sobald ich button2 drücke usw... Es soll halt immer nur ein div offen sein. Habe es schon mit while-schleife und next() probiert. Komme aber auf keinen grünen Zweig.

Hier mein Code:

Code: 
<!DOCTYPE html>
<html>
<head>




</head>
<body>



<script type="text/javascript">


function show(id)
{

window.focus();
	
	
	if( document.getElementById(id).style.display == "none"){
	document.getElementById(id).style.display = "";

	} else {
			document.getElementById(id).style.display = "none";
		}

  }	



</script>

  <table>
  	<tr>
		<td> 
			<button style="cursor:pointer;" onClick="javascript:show(1)">
				Titel1
			</button>
		</td>
	</tr>
</table>
	<div id="1" style="display:none">News1</div>

  <table>
  	<tr>
		<td>
			<button  style="cursor:pointer;" onClick="javascript:show(2)">
				Titel2
			</button>
		</td>
	</tr>
</table>
	<div id="2" style="display:none">News2</div>
	
  <table>
  	<tr>
		<td>
			<button  style="cursor:pointer;" onClick="javascript:show(3)">
				Titel3
			</button>
		</td>
	</tr>
</table>
	<div id="3" style="display:none">News3</div>


</body>
</html>

Merce schon mal!
 
Hier mal eine kleine abgeleitete Version von mir. sollte eigentlich funktionieren.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
	function show(id){
		var elements = document.getElementsByClassName('test');
		
		for(i=0;i<elements.length;i++){
			elements[i].style.display = 'none';			
		}
		document.getElementById(id).style.display = 'block';
window.focus();
		
	}
</script>
<style type="text/css">
.test{
	border: 1px #000 solid;
	width: 250px;
	height: 25px;
	display:none;
}
</style>
</head>
<body>
<div id="div1" class="test">DIV 1</div>
<div id="div2" class="test">DIV 2</div>
<div id="div3" class="test">DIV 3</div>
<a href="#" onclick="show('div1')">klick1</a><br />
<a href="#" onclick="show('div2')">klick2</a><br />
<a href="#" onclick="show('div3')">klick3</a>
</body>
</html>

Edit: funktioniert leider nur im Firefox
 
Maniacs Funktion ein bisschen verändert läuft bei mir.


Code: 
function show(id){

    var elements = new Array("div1", "div2", "div3");

    for(i=0;i<elements.length;i++){
    	document.getElementById(elements[i]).style.display = 'none';
    }
    document.getElementById(id).style.display = 'block';
	window.focus();

}

Es werden einfach alle betreffenden DIVs in ein Array eingelesen und damit wird ein- bzw. ausgeblendet.
 
So klappt es auch Dynmaisch mit meiner funktion im InternetExplorer:
Code: 
function show(id){
		var elements = document.getElementsByTagName('div');
		
		for(i=0;i<elements.length;i++){
			if(elements[i].className == 'test'){
				elements[i].style.display = 'none';
			}
		}
		document.getElementById(id).style.display = 'block';
                window.focus();
		
	}
 
So, danke nochmal. Hab das jetzt hinbekommen.

Jetzt hab ich noch was kniffliges glaub ich.
Die einzelnen divs werden über ein cfquery-Schleife in mein html eingebunden. habe also einen block html-code der dann dupliziert wird. (insgesamt 5x)
Es soll das erste div aber geöffnet sein sobald man die Seite aufruft.
Versuch das soeben mir der document.ready() hinzubekommen. Wenn ihr einen besseren Vorschlag habt, immer her damit :)

Gruß Franz.
 
Machs doch per CSS:
CSS: 
.first{
   display:block;
}
Code: 
<div class="test first" id="div1">DIV1</div>
<div class="test" id="div2">DIV2</div>
 
Das geht eben nicht, da jedes div die selbe class hat, da es durch die Schleife, wie gesagt dupliziert wird. Alle divs haben somit die gleichen Eigenschaften, außer der ID die aus der DB kommt. Muss also irgendwie definiern, dass das erste div auf der seite offen ist und alle anderen geblockt.
 
Da kannste fast die selbe Funktion von iben nehmen, nur das du eben in der Schleife rausspringen musst wenn das 1. Div durchlaufen ist.
 
So hab das Problem jetzt so gelöst:

Code: 
 js:

window.onload = first;
function first(){


	var elements = document.getElementsByTagName('div');
	for(i=0; i<elements.length; i++){
	if(elements[i].className == 'test'){
	
		if (elements[0].style.display = 'none'){
			elements[0].style.display = '';
		}
	}
	}
}

function show(id){

		var elements = document.getElementsByTagName('div');
        for(i=0; i<elements.length; i++){
            if(elements[i].className == 'test'){
                elements[i].style.display = 'none';

			}
        }
		
		document.getElementById(id).style.display = 'block';   
}

Code: 
 html:
table>
  	<tr>
		<td> 
			<button style="cursor:pointer;" onClick="javascript:show(1)">
				Titel1
			</button>
		</td>
	</tr>
</table>
	<div id="1" class="test" style="display:none">News1</div>

  <table>
  	<tr>
		<td>
			<button  style="cursor:pointer;" onClick="javascript:show(2)">
				Titel2
			</button>
		</td>
	</tr>
</table>
	<div id="2" class="test"  style="display:none">News2</div>
	
  <table>
  	<tr>
		<td>
			<button  style="cursor:pointer;" onClick="javascript:show(3)">
				Titel3
			</button>
		</td>
	</tr>
</table>
	<div id="3" class="test" style="display:none">News3</div>

Funktioniert schaut mir aber ein bisschen umständlich aus!?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück