OK so today I am going to show you how to get this effect...

http://gctest2010.formyjob.net/slider1-h1.htm

So lets start with the CSS. You can use an internal style sheet or you can link to an external one. For this example I'm using an internal CSS.

Code:


<style type="text/css">

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

.gc_question{   /* Styling question */
   /* Start layout CSS */
   color:#FFF;
   font-size:0.9em;
   background-color:#94e000;
   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;
}
.gc_answer{   /* Parent box of slide down content */
   /* Start layout CSS */
   border:1px solid #317082;
   background-color:#c3c3c3;
   width:400px;
   
   /* End layout CSS */
   
   visibility:hidden;
   height:0px;
   overflow:hidden;
   position:relative;

}
.gc_answer_content{   /* Content that is slided down */
   padding:1px;
   font-size:0.9em;   
   position:relative;
}

</style>

OK now that's the CSS. We will move onto the jQuery... again you can use internal or external hosting.

Code:


<script type="text/javascript">

var gc_slideSpeed = 15   // Higher value = faster
var gc_timer = 10;   // Lower value = faster

var objectIdToSlideDown = false;
var gc_activeId = false;
var gc_slideInProgress = false;
function showHideContent(e,inputId)
{
   if(gc_slideInProgress)return;
   gc_slideInProgress = true;
   if(!inputId)inputId = this.id;
   inputId = inputId + '';
   var numericId = inputId.replace(/[^0-9]/g,'');
   var answerDiv = document.getElementById('gc_a' + numericId);

   objectIdToSlideDown = false;
   
   if(!answerDiv.style.display || answerDiv.style.display=='none'){      
      if(gc_activeId &&  gc_activeId!=numericId){         
         objectIdToSlideDown = numericId;
         slideContent(gc_activeId,(gc_slideSpeed*-1));
      }else{
         
         answerDiv.style.display='block';
         answerDiv.style.visibility = 'visible';
         
         slideContent(numericId,gc_slideSpeed);
      }
   }else{
      slideContent(numericId,(gc_slideSpeed*-1));
      gc_activeId = false;
   }   
}

function slideContent(inputId,direction)
{
   
   var obj =document.getElementById('gc_a' + inputId);
   var contentObj = document.getElementById('gc_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 + ')',gc_timer);
   }else{
      if(height<=1){
         obj.style.display='none';
         if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
            document.getElementById('gc_a' + objectIdToSlideDown).style.display='block';
            document.getElementById('gc_a' + objectIdToSlideDown).style.visibility='visible';
            slideContent(objectIdToSlideDown,gc_slideSpeed);            
         }else{
            gc_slideInProgress = false;
         }
      }else{
         gc_activeId = inputId;
         gc_slideInProgress = false;
      }
   }
}



function initShowHideDivs()
{
   var divs = document.getElementsByTagName('DIV');
   var divCounter = 1;
   for(var no=0;no<divs.length;no++){
      if(divs[no].className=='gc_question'){
         divs[no].onclick = showHideContent;
         divs[no].id = 'gc_q'+divCounter;
         var answer = divs[no].nextSibling;
         while(answer && answer.tagName!='DIV'){
            answer = answer.nextSibling;
         }
         answer.id = 'gc_a'+divCounter;   
         contentDiv = answer.getElementsByTagName('DIV')[0];
         contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';    
         contentDiv.className='gc_answer_content';
         contentDiv.id = 'gc_ac' + divCounter;
         answer.style.display='none';
         answer.style.height='1px';
         divCounter++;
      }      
   }   
}
window.onload = initShowHideDivs;
</script>

Now the HTML...

Code:

<div class="gc_question">Q: Hello Web Artz!?</div><div class="gc_answer">
   <div>
      This is awesome!
      <ul>
         <li>Hello</li
         ><li>Hello</li
         ><li>Hello</li
         ><li>Hello</li
         ><li>Hello</li
           
      ></ul>

   </div>
</div>
</div>

OK so now for the editing.

OK to edit the tab color you edit this part of the CSS in .gc_question

Code:

background-color:#94e000;

To edit the slider color you edit this part of the CSS in .gc_answer

Code:

background-color:#c3c3c3;

To edit the part that is shown in the tab you change this...

Code:

<div class="gc_question">Q: Hello Web Artz!?</div>

To edit the content in the slider you change this...

Code:

<div class="gc_answer">
   <div>
      This is awesome!
      <ul>
         <li>Hello</li
         ><li>Hello</li
         ><li>Hello</li
         ><li>Hello</li
         ><li>Hello</li
           
      ></ul>

   </div>

and finaly, not really editing just a head up.

If you do not use this link where it says "images/bg_answer.gif" in the CSS, this will not work properly, so host this image for yourself

Code:

http://gctestforum.omgforum.net/images/bg_answer.gif

Thanks,
Rob
I hope you enjoyed reading this tutorial!

This one is nice too.

Why is it called "Q&A slider"? It can be used as a normal content slider, so, I think both slider tutorials can be combined? What do you think?

wow! Great tutorial!

THIS HAS TO BE ACCEPTED!

ankillien wrote:This one is nice too.

Why is it called "Q&A slider"? It can be used as a normal content slider, so, I think both slider tutorials can be combined? What do you think?

If you would like to do that you can

Also, I am having trouble with using div's, if you want to edit the tutorials you can, you can include your name in the credits

Since a similar slider tutorial is available there, we'll reject this one.

Tutorial Rejected