Код:
?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>
<title>SHOW/HIDE Div with Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script type="text/javascript">
function showContent(vThis)
{
// http://www.javascriptjunkie.com
// alert(vSibling.className + " " + vDef_Key);
vParent = vThis.parentNode;
vSibling = vParent.nextSibling;
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or Something
vSibling = vSibling.nextSibling;
};
if(vSibling.style.display == "none")
{
vThis.src="/images/collapse.gif";
vThis.alt = "Hide Div";
vSibling.style.display = "block";
} else {
vSibling.style.display = "none";
vThis.src="/images/expand.gif";
vThis.alt = "Show Div";
}
return;
}
</script>
<body>
<h3>Show/Hide Div Example</h3>
<div style="margin-top:5px;">
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #1</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #1 div</p>
</div>
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #2</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #2 div</p>
</div>
</div>
</body>
</html>
и създаваш папка images и слагаш тез двете в нея:
демо: http://www.javascriptjunkie.com/examples/9-show-hide-div.htm
( натисни +чето на картинка и ще се спусне надолу
)
