ДЕМО
Вставляем в head и /head:
CSS:
Code
<style type="text/css">
/* Start of css that is not needed for the script */
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
}
p{
margin-top:0px;
}
a{
color:#FF0000;
text-decoration:none;
}
/* End of css that is not needed for the script */
/* Don't delete anything below here */
.dhtmlgoodies_contentBox{
border:1px solid #317082;
height:0px;
visibility:hidden;
position:absolute;
background-color:#E2EBED;
overflow:hidden;
padding:2px;
width:250px;
}
.dhtmlgoodies_content{
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
font-size:0.8em;
}
</style>
JS:Code
<script type="text/javascript">
/*
*******************************************************************************************************
* *
* Это - сценарий, и много других - Вы найдёте на нашем сайте: http://shalbuzdag-666.ucoz.ru/ *
* *
*******************************************************************************************************
*/
var slideDownInitHeight = new Array();
var slidedown_direction = new Array();
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 3; // Higher value = faster script
var slidedownTimer = 7; // Lower value = faster script
function slidedown_showHide(boxId)
{
if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;
if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
slidedownContentBox = document.getElementById(boxId);
var subDivs = slidedownContentBox.getElementsByTagName('DIV');
for(var no=0;no<subDivs.length;no++){
if(subDivs[no].className=='dhtmlgoodies_content')slidedownContent = subDivs[no];
}
contentHeight = slidedownContent.offsetHeight;
slidedownContentBox.style.visibility='visible';
slidedownActive = true;
slidedown_showHide_start(slidedownContentBox,slidedownContent);
}
function slidedown_showHide_start(slidedownContentBox,slidedownContent)
{
if(!slidedownActive)return;
slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
if(slideDownInitHeight[slidedownContentBox.id] <= 0){
slidedownActive = false;
slidedownContentBox.style.visibility='hidden';
slideDownInitHeight[slidedownContentBox.id] = 0;
}
if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
slidedownActive = false;
}
slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer); // Choose a lower value than 10 to make the script move faster
}
function setSlideDownSpeed(newSpeed)
{
slidedownSpeed = newSpeed;
}
</script>
Ну, а это - в тело:Code
<div>
<div id="dhtmlgoodies_control"><b><a href="#" onclick="slidedown_showHide('box1');return false;">Кликни здесь</a></b></div>
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- содержимое скольжения идёт сюда -->
Это - содержимое, которое мы хотим показать
Это - содержимое, которое мы хотим показать
Это - содержимое, которое мы хотим показать
Это - содержимое, которое мы хотим показать
Это - содержимое, которое мы хотим показать
Это - содержимое, которое мы хотим показать
<!-- Конец содержимого скольжения -->
</div>
</div>
</div>
<div>
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
Другое содержимое
<div>
<div id="dhtmlgoodies_control"><b><a href="#" onclick="slidedown_showHide('box2');return false;">Кликни здесь</a></b></div>
<div class="dhtmlgoodies_contentBox" id="box2">
<div class="dhtmlgoodies_content" id="subBox2">
<!-- содержимое скольжения идёт сюда -->
Это - содержимое другого контейнера
Это - содержимое другого контейнера
Это - содержимое другого контейнера
<!-- Конец содержимого скольжения -->
</div>
</div>
</div>
<script type="text/javascript">
setSlideDownSpeed(4);
</script>