Скриващ се <div> с JavaScript

[Joey]

Здравейте
Нали се сещате как в някой сайтове едно в повечето случаи кръгло бутонче се натиска , за да се появи да кажем кратко съдържание с текст под него?
Понеже нямам никакви познания по JS, ви моля да ми помогнете със скрипта на това чудо.

//можете ли да ми препоръчате нещо като книжка/учебник с който мога да навляза малко по-навътре в JavaScript ?

 

[jorkata_1354]

<script type="text/javascript">
function hidediv()
   {
	document.getElementById('hidediv').style.display= "none"; //Задаваме без визуализация за div с id = hidediv
   }
window.onload = function()
   {
	setTimeout("hidediv()", 5*1000); //след колко време да се скрие, 1000 е 1 секунда, като умножим по 5 стават 5 секунди
   }
</script>

<div id="hidediv">Този div се скрива след определено време.</div>
<div>Този div си се вижда постоянно.</div>

дано ти свърши работа

 

[emagi]

<?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="/img/collapse.gif";
vThis.alt = "Show DIV";
vSibling.style.display = "block";
} else {
vSibling.style.display = "none";
vThis.src="/img/expand.gif";
vThis.alt = "Hide 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; cursorointer;" 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; cursorointer;" 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>

 

[Joey]

Получи се
Благодаря и на двамата