/********************************************************************************
***************************/
var myslider_slideSpeed = 10; // Higher value = faster
var myslider_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var myslider_activeId = false;
var myslider_slideInProgress = false;
function showHideContent(e,inputId)
{
if(myslider_slideInProgress)return;
myslider_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('myslider_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(myslider_activeId && myslider_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(myslider_activeId,(myslider_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,myslider_slideSpeed);
}
}else{
slideContent(numericId,(myslider_slideSpeed*-1));
myslider_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('myslider_a' + inputId);
var contentObj = document.getElementById('myslider_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',myslider_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('myslider_a' + objectIdToSlideDown).style.display='block';
document.getElementById('myslider_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,myslider_slideSpeed);
}else{
myslider_slideInProgress = false;
}
}else{
myslider_activeId = inputId;
myslider_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='myslider_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'myslider_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'myslider_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='myslider_answer_content';
contentDiv.id = 'myslider_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
<div class="myslider_question">Open
</div> <div class="myslider_answer">
Text tu
<a href="#" onclick="javascript: initShowHideDivs()">close
</a>
Witam
Mam taki skrypcik odpowiedzialny za rozwijanie i zwijanie diva. Skrypt dziala tak ze jak nacisne Open to mi sie ladnie rozwinie i jak ponowie to mi sie zwinie. Staram sie dorobic guzik w srodku diva ktory bedzie odpowiedzialny za zwijanie (takie zamknij). Puki co mam tak ze div sie zamknie ale nie ma animacji zwijania. Czy ktos moze mi poradzic jak to zrobic?(IMG:
http://forum.php.pl/style_emoticons/default/questionmark.gif) Inne pytanko jak dodac taki efekt bounce po rozwinieciu czyli zeby tak leciutko podskoczyl div jak sie rozwinie mozna to znalaezc czasami. Z gory dzieki za pomoc.