jquery dropdown

by midhun_k

HTML

<div class = "dropdown-profile-container">
         <div class = "profile-pic-container">
               here goes picture
       </div>
       <div class = "timeline-container">
               <div class = "A children">
                 <span class = "span-text">JsFoo Talk</span>
                 <div class = "elemA pointer">
                       <span class = "pointer-span">2012</span>
                 </div>
            </div>
            <div class = "B children">
                 <span class = "span-text">google Talk</span>
                 <div class = "elemB pointer">
                       <span class = "pointer-span">2011</span>
                 </div>
            </div>
            <div class = "C children">
                 <span class = "span-text">yahoo Talk</span>
                 <div class = "elemC pointer">
                       <span class = "pointer-span">2010</span>
                 </div>
            </div>
            <div class = "D children">
                 <span class = "span-text">ms Talk</span>
                 <div class = "elemD pointer">
                       <span class = "pointer-span">2009</span>
                 </div>
            </div>
            <div class = "E children">
                 <span class = "span-text">multunus Talk</span>
                 <div class = "elemE pointer">
                       <span class = "pointer-span">2008</span>
                 </div>
            </div>
       </div>
  </div>
  
  <a class = "onclick" href ="#">click here</a>

CSS

.dropdown-profile-container{
          height: auto;
          border: 1px solid grey;
          float:left;
          clear:both;
          border-radius: 5px 5px 0px 0px;
          margin-left:150px;
 }
 
.profile-pic-container{
          margin: 5px 5px 5px 30px;
          width: 200px;
          min-height:200px;
          background-color:#3d668f;

}

.timeline-container{
          border-radius: 10px 10px 0px 0px;
          margin : 5px 5px 5px 30px;
          width: 200px;
          background-color:#3d668f;
 }
 
 .children{
           height: 50px;
           border-bottom: 1px solid grey;
           -webkit-transition: height .3s ease-in-out;
  }
  
 .span-text{
            line-height: 49px;
            margin-left: 20px;
            font-weight: bold;
            color: white;
            -webkit-transition: color .2s ease-in-out;
  }
  
  .span-text:hover{
            color: #8fde62;
   }
  
  .pointer-span{
                margin-left: 35px;
                line-height: 22px;
   }
   
 .elemA{
    top: 230px;
     display:none;            
  }
  
  .elemB{
         top:282px;
         display:none;        
  }
  
  .elemC{
         top:330px;
         display:none;         
  }
  
  .elemD{
         top:382px;
         display:none;         
  }
  
  .elemE{
         top:434px;
         display:none;         
  }
  
 .pointer{
          position: absolute;
          left: 97px;
          min-height: 23px;
          background-color: white;
          border: 3px solid black;
          width: 91px;
          border-radius: 0px 17px 17px 0px;
   }
 
.children-onhover{
                    height: 50px;
   }

JavaScript

$(function(){
                
    $(".onclick").toggle(function(){
        $(".children").animate({height:'50'});
    },function(){$(".children").animate({height:'0'});
                });
                

            });