To toggle funktioner på en side
Hej eksperter,Hvordan undgår jeg at de to toggle funktioner reset'er hinanden. Så et klik som kalder den ene toggle funktion ophæver et tidligere valg? Jeg vil gerne have at de to toggle funktioner fungere uafhængigt af hinanden. Jeg har ikke tidligere forsøgt mig med Javascript så jeg er newb hvad det angår.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CCP</title>
<script type="text/javascript">
function ToggleMe1(boxid) {
var boxes = document.getElementsByTagName("div");
for(var i=0; i<boxes.length; i++) {
name = boxes[i].getAttribute("name");
if (name == boxes[i].id.substr(0,4)) {
if (boxes[i].id == boxid) {
boxes[i].style.display = 'block';
} else {
boxes[i].style.display = 'none';
}
}
}
return true;
}
function ToggleMe2(boxid) {
var boxes = document.getElementsByTagName("div");
for(var i=0; i<boxes.length; i++) {
name = boxes[i].getAttribute("name");
if (name == boxes[i].id.substr(0,4)) {
if (boxes[i].id == boxid) {
boxes[i].style.display = 'block';
} else {
boxes[i].style.display = 'none';
}
}
}
return true;
}
</script>
</head>
<body>
<div>
<img src="Images/p1.png" onclick="return ToggleMe1('para1')" />
<img src="Images/p2.png" onclick="return ToggleMe1('para2')" />
<img src="Images/p3.png" onclick="return ToggleMe1('para3')" />
<img src="Images/p4.png" onclick="return ToggleMe1('para4')" />
<div name="para" id="para1" style="display:none">
<p>This is the information about Change Initiation.</p>
</div>
<div name="para" id="para2" style="display:none">
<p>This is the information about Change Handling.</p>
</div>
<div name="para" id="para3" style="display:none">
<p>This is the information about Change Implementation.</p>
</div>
<div name="para" id="para4" style="display:none">
<p>This is the information about Change Closure.</p>
</div>
</div>
<div>
<img src="Images/p1.png" onclick="return ToggleMe2('fara1')" />
<img src="Images/p2.png" onclick="return ToggleMe2('fara2')" />
<img src="Images/p3.png" onclick="return ToggleMe2('fara3')" />
<img src="Images/p4.png" onclick="return ToggleMe2('fara4')" />
<div name="fara" id="fara1" style="display:none">
<p>This is the information about CI.</p>
</div>
<div name="fara" id="fara2" style="display:none">
<p>This is the information about CH.</p>
</div>
<div name="fara" id="fara3" style="display:none">
<p>This is the information about CI.</p>
</div>
<div name="fara" id="fara4" style="display:none">
<p>This is the information about CC.</p>
</div>
</div>
</body>
</html>
