展开 或者折叠 内容

head:

<style type="text/css">

body{
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;    /**//* Font to use */
    margin:0px;
    
}

.dhtmlgoodies_question{    /**//* Styling question */
    /**//* Start layout CSS */
    color:#FFF;
    font-size:0.9em;
    background-color:#317082;
    width:430px;
    margin-bottom:2px;
    margin-top:2px;
    padding-left:2px;
    background-image:url('images/bg_answer.gif');
    background-repeat:no-repeat;
    background-position:top right;    
    height:20px;
    
    /**//* End layout CSS */
    
    overflow:hidden;
    cursor:pointer;
}
.dhtmlgoodies_answer{    /**//* Parent box of slide down content */
    /**//* Start layout CSS */
    border:1px solid #317082;
    background-color:#E2EBED;
    width:400px;
    
    /**//* End layout CSS */
    
    visibility:hidden;
    height:0px;
    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

Updated:
    April, 3rd, 2006: Fixed problem with initial sliding in IE.

************************************************************************************************************/

var dhtmlgoodies_slideSpeed = 10;    // Higher value = faster
var dhtmlgoodies_timer = 10;    // Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
function showHideContent(e,inputId)
{
    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;
    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_activeId = inputId;
        }
    }
}



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++;
        }        
    }    
}
window.onload = initShowHideDivs;
</script>

body

<div class="dhtmlgoodies_question">Q: What are the advantages of table less design?</div>
<div class="dhtmlgoodies_answer">
    <div>
        Ohh! There are so many:
        <ul>
            <li>Faster loading pages</li>
            <li>Smoother loading pages</li>
            <li>Saved bandwidth</li>
            <li>Separate layout and content</li>
            <li>Easy to change layout</li>
            <li>Increased accessibility</li>
            <li>Different styling for different media(print, screen, pda)</li>
        </ul>
    </div>
</div>
<div class="dhtmlgoodies_question">Q: What is the difference between the div and span tag ?</div>
<div class="dhtmlgoodies_answer">
    <div>
        DIV is a block element while SPAN is an inline element. What's common to them both is that none of them have any default styling.
    </div>
</div>
<div class="dhtmlgoodies_question">Q: What kind of site is dhtmlgoodies.com ?</div>
<div class="dhtmlgoodies_answer">
    <div>
        dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland. Here, you will find a lot of 
        DHTML scripts you can use freely to enhance your website.
    </div>
</div>