Question

i’m looking into implementing something similar to the li’s in chrome extension page.
Should i use jQuery slideToggle? maybe someone can provide some sort of a sample
code i could start off with? (i’m new to jQuery)

Answer 1

You don’t need any complicated plugins, you can do all of this with jquery. Here is a quick sample i whipped out. It’s simple really.

The html

<div id="outer"> 
    <p>Some outer content </p>
   <div id="inner">Slider Content </div> 
</div> ​

The css

#outer{
   height: 200px; 
   width: 200px; 
   background-color: brown; 
   overflow: hidden; 
   position: relative;     
}
#inner{ 
    height: 200px;
    width: 100%;     
    background-color: green;
    position: absolute; 
    top: 100%; 
}

The JS

  $('#outer').hover(
    function(){
       $('#inner').animate({ top: '0%' }, 'easein' );  
    }, 
    function(){
       $('#inner').animate({ top: '100%' }, 'easein' );  
    }        
   ); ​

Here it is in action.