$(function(){ $(".onclick").toggle(function(){ $(".children").addClass("children-onhover");},function(){$(".children").removeClass("children-onhover");}); });
<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>
.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: 0px; 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; }