nicht angemeldet
"div" onClick öffnen und schliessen
Hi,
Wie bekomme ich in die unten stehende Funktion ( function display_links(sender)) zusätzlich rein, dass sich der verschachtelte div (<div id="thema_1_cont") bei Mausklick auf "Configuration und Pfeil" nicht nur schließt, sondern auch bei erneutem Mausklick wieder öffnet?
vielen Dank
Sandra
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function display_links(sender) {
var cont = document.getElementById(sender.id+"_cont");
var tag = document.getElementsByTagName('div');
for (i=0;i<tag.length;i++) {
if (tag[i].id.indexOf('_cont')!=-1){
tag[i].style.display='none';
}
}
}
//-->
</script>
<title>div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="thema_1">
<p> </p>
<p><a href="#" onClick="display_links('thema_1_cont')">Configuration<font color="#FFFFFF">.</font><img src="images/down.jpg" width="9" height="9" border="0" /></a>
</p>
<div id="thema_1_cont" style="display:block">
<table width="75%" border="0">
<tr>
<td width="19%"><div align="right">ID</div></td>
<td width="81%"> <input type="text" name="textfield2" /> </td>
</tr>
<tr>
<td><div align="right">High Priority</div></td>
<td>
<input type="checkbox" name="checkbox" value="checkbox" />
</td>
</tr>
</table> <br />
<br />
</div>
</div>
<div id="thema_2"> <a href="#" onClick="display_links('thema_2_cont')">Commands<font color="#FFFFFF">.</font><img src="images/down.jpg" width="9" height="9" border="0" /></a>
<div id="thema_2_cont" style="display:block">
<table width="75%" border="0">
<tr>
<td width="19%"><div align="right">Reset</div></td>
<td width="81%">
<input type="text" name="textfield" />
</td>
</tr>
<tr>
<td><div align="right">Test</div></td>
<td>
<input type="radio" name="radiobutton" value="radiobutton" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
-
function display_links(sender) {
var cont = document.getElementById(sender.id+"_cont");
var tag = document.getElementsByTagName('div');
for (i=0;i<tag.length;i++) {
if (tag[i].id.indexOf('_cont')!=-1){if(tag[i].style.display=='none')
{
tag[i].style.display='block';
}
else
{tag[i].style.display='none';
}
}
}Marco
-
Vielen Dank,
Ihr seid super!!
-
-
Hallo,
Wie bekomme ich in die unten stehende Funktion ( function display_links(sender)) zusätzlich rein, dass sich der verschachtelte div (<div id="thema_1_cont") bei Mausklick auf "Configuration und Pfeil" nicht nur schließt, sondern auch bei erneutem Mausklick wieder öffnet?
function display_links(sender) {
var cont = document.getElementById(sender.id+"_cont");Wofür brauchst Du dieses Objekt?
var tag = document.getElementsByTagName('div');
tag ist ein Array aller div-Elemente im document
for (i=0;i<tag.length;i++) {
if (tag[i].id.indexOf('_cont')!=-1){
tag[i].style.display='none';Alle div-Elemente, deren id den String "_cont" beinhaltet werden ausgeblendet.
}
}
}Willst Du bei Click alle divs ausblenden? Oder suchst Du eher etwas wie das hier?
Einen genehmen Dokumenttyp musst Du noch einfügen.<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function kapitelEA(kap) {
if (document.getElementById("Button" + kap).value=="-") {
document.getElementById("Kapitel" + kap).style.display="none";
document.getElementById("Button" + kap).value="+";
} else {
document.getElementById("Kapitel" + kap).style.display="block";
document.getElementById("Button" + kap).value="-";
}
}//-->
</script>
</head>
<body>
<div>Kapitel1<input type="button" name="btn1" value="-" id="Button1" onclick="kapitelEA(1);" style="width:16px; height:16px; line-height:8px;"></div>
<div id="Kapitel1" style="border:1px solid black;">
Inhalt von Kapitel 1 Inhalt von Kapitel 1 Inhalt von Kapitel 1 Inhalt von Kapitel 1 Inhalt von Kapitel 1 Inhalt von Kapitel 1 Inhalt von Kapitel 1
</div>
<div>Kapitel2<input type="button" name="btn2" value="-" id="Button2" onclick="kapitelEA(2);" style="width:16px; height:16px; line-height:8px;"></div>
<div id="Kapitel2" style="border:1px solid black;">
Inhalt von Kapitel 2 Inhalt von Kapitel 2 Inhalt von Kapitel 2 Inhalt von Kapitel 2 Inhalt von Kapitel 2 Inhalt von Kapitel 2 Inhalt von Kapitel 2
</div>
<div>Kapitel3<input type="button" name="btn3" value="-" id="Button3" onclick="kapitelEA(3);" style="width:16px; height:16px; line-height:8px;"></div>
<div id="Kapitel3" style="border:1px solid black;">
Inhalt von Kapitel 3 Inhalt von Kapitel 3 Inhalt von Kapitel 3 Inhalt von Kapitel 3 Inhalt von Kapitel 3 Inhalt von Kapitel 3 Inhalt von Kapitel 3
</div>
</body>
</html>viele Grüße
Axel