제목 클릭시 내용이 부드럽게 슬라이딩 되면서 펼쳐지게. > script

<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 = 10;    // Higher value = faster
var dhtmlgoodies_timer = 10;    // 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>

<div class="dhtmlgoodies_question"><B>Q: 서방님닷컴은?</B></div>
<div class="dhtmlgoodies_answer">
    <div style="padding:15">
    개인 사이트입니다.<br>
  왠만한 카테고리들은 회원가입없이 볼 수 있습니다.<br>
  저작권에 위배되는 자료들은 메일 주시면 삭제처리 합니다.
    </div>
</div>
<br>

<div class="dhtmlgoodies_question"><B>Q: 이건 뭐죠?</B></div>
<div class="dhtmlgoodies_answer">
    <div style="padding:15">
    제목을 클릭하면 내용이 펼쳐집니다.<br>
  dhtml 을 이용하여 부드럽게 슬라이딩 시켜 줍니다.
    </div>
</div>
<br>

<div class="dhtmlgoodies_question"><B>Q: 가져다 써도 되나요?</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>