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>