# Auf- und zuklappen von divs!



## Kaiser_Franz (12. April 2011)

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:


```
<!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!


----------



## Maniac (12. April 2011)

Hier mal eine kleine abgeleitete Version von mir. sollte eigentlich funktionieren.

```
<!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


----------



## tombe (12. April 2011)

Maniacs Funktion ein bisschen verändert läuft bei mir.



```
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.


----------



## Maniac (12. April 2011)

So klappt es auch Dynmaisch mit meiner funktion im InternetExplorer:

```
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();
		
	}
```


----------



## Kaiser_Franz (12. April 2011)

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.


----------



## Maniac (12. April 2011)

Machs doch per CSS:

```
.first{
   display:block;
}
```


```
<div class="test first" id="div1">DIV1</div>
<div class="test" id="div2">DIV2</div>
```


----------



## Kaiser_Franz (12. April 2011)

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.


----------



## Maniac (12. April 2011)

Da kannste fast die selbe Funktion von iben nehmen, nur das du eben in der Schleife rausspringen musst wenn das 1. Div durchlaufen ist.


----------



## Kaiser_Franz (14. April 2011)

So hab das Problem jetzt so gelöst:


```
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';   
}
```


```
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!?


----------

