Css Hide show problem

anu30

i have the images i want it to display down of the list only .Please some one help me

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
 
<html>

<head>
 
<style type="text/css">
 
body{

    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;    /* Font to use */

    margin:0px;
 
}
 
.dhtmlgoodies_question{    

    /* Start layout CSS */
 
    color:#FFF;

    font-size:0.9em;

    background-color:#F46200;

    width:200px;

    margin-bottom:2px;

    margin-top:2px;

    padding-left:2px;
 
    background-repeat:no-repeat;

    background-position:top right;    

    height:20px;

    overflow:hidden;

    cursor:pointer;

    position:inherit;

    float:left;

}

.img{    /* 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;

    width:300;
 
}

.dhtmlgoodies_answer_content{    /* Content that is slided down */

    padding:1px;

    font-size:0.9em;    

    position:relative;

    cursor:default;
 
}
 
</style>

<script type="text/javascript">
 
var dhtmlgoodies_slideSpeed = 10;    // Higher value = faster

var dhtmlgoodies_timer = 10;    // Lower value = faster
 
var objectIdToSlideDown = true;;

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++;

        }        

    }    

}

window.onload = initShowHideDivs;

</script>

</head>

<body>
 
<div  align="left" class ="dhtmlgoodies_question">New Products</div>
 
    <div id="img">

    <div class="dhtmlgoodies_answer">

        <img src="images2.jpg"/>

        <img src="images6.jpg"/>

        </div>
 
    </div>

<div align="left" class="dhtmlgoodies_question">Hot Products</div>
 
    <div class="dhtmlgoodies_answer">

    <div  id="Hot Products">

        <img src="images1.jpg"/>

        <img src="images5.jpg"/>

    </div>

    </div>
 
<div align="left" class="dhtmlgoodies_question">Comming soon</div>
 
    <div class="dhtmlgoodies_answer">

    <div  id="coming soon">

        <img src="images3.jpg"/>

        <img src="images4.jpg"/>

    </div>

    </div>
 
</body>

</html>

Markus

Hey there, Anu and welcome to the forums.

When posting code on the forums, be sure to use [code] tags. [code] .. code goes here [/code]. If you neglect to do so, you will be given a warning and possibly a temporary ban. Please read the Posting Guidelines on How To Ask A Question

Markus.

Css Hide show problem

re: Css Hide show problem

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about