소스하단에 있는 옵션값을 조정하여 페이지 로딩시 최초로 보여질 항목을 지정할수 있습니다.
맨 아래 자바스크립트를 참고하세요..
데모를 확인하시고 자바스크립트 주석을 참고하여 슬라이딩속도를 조절할수 있습니다.
아래는 본 예제의 자바스크립트입니다.
<html>
<head>
<title>해피CGI</title>
<style type="text/css">
.dhtmlgoodies_question{ /* Styling question */
font-size:12px;
font-family:verdana;
letter-spacing:-1px;
background-color:#999999;
border:1px #444444 solid;
color:ffffff;
width:430px;
padding:8px;
overflow:hidden;
cursor:pointer;
}
.dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
font-size:12px;
font-family:verdana;
border-bottom:1px solid #444444;
border-right:1px solid #444444;
border-left:1px solid #444444;
background-color:#efefef;
padding:0px;
width:430px;
visibility:hidden;
overflow:hidden;
position:relative;
}
.dhtmlgoodies_answer_content{ /* Content that is slided down */
padding:1px;
font-size:0.9em;
position:relative;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 20; // Higher value = faster
var dhtmlgoodies_timer = 20; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_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 + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
</script>
</head>
<body>
<div class="dhtmlgoodies_question"><B>Q: 해피CGI는 앞으로의 희망을 날립니다.</B></div>
<div class="dhtmlgoodies_answer">
<div style="padding:15">
해피CGI의 첫발걸음을 지켜봐주신 고객분들 정말 감사드립니다.<br>
앞으로 나아가며 하늘로 비상할 엔진을 탑제한 슈퍼솔루션을 기대하며<br>
발전하는 해피CGI가 되겠습니다.
</div>
</div>
<br>
<div class="dhtmlgoodies_question"><B>Q: 해피CGI의 자료는 모두 무료입니다. </B></div>
<div class="dhtmlgoodies_answer">
<div style="padding:15">
해피CGI의 모든 자료는 무료입니다. <br>
고객분들의 참여로 해피CGI는 계속 정진해 나가는 회사입니다.<br>
고객님들께 성원하기 위한 자그마한 서비스이니<br>
많은 참여와 등록을 부탁드립니다.
</div>
</div>
<br>
<div class="dhtmlgoodies_question"><B>Q: 해피CGI 본토토벌정벌은 언제일까요? </B></div>
<div class="dhtmlgoodies_answer">
<div style="padding:15">본토토벌정벌? 크크크 머죠? ㅋ </div>
</div>
<br>
<script type="text/javascript">
initShowHideDivs();
showHideContent(false,1);
// 페이지 로딩시 첫번째로 펼쳐질 항목 선택
// 1=첫번째 항목 2=두번째 항목
// 페이지 로딩시 펼쳐질 항목이 나타나지 않게 하려면 showHideContent(false,1);을 주석 처리 또는 삭제하세요.
</script>
</body>
</html>
|
