$(document).ready(function () { $('#showLocalityMenu').click(function () { $('.localityMenu').slideToggle("fast"); $('#showLocalityMenuIcon').toggleClass("showSelectedOpen"); }); });
<div id="showLocalityMenu"> Select Locality <div id="showLocalityMenuIcon"> </div> </div> <div class="localityMenu"> <a href="#">Bokaro</a> <a href="#">Jamshedpur</a> <a href="#">Golmuri</a> <a href="#">Ranchi</a> </div>
body{ background-color:gray; } #showLocalityMenu { position: absolute; margin-top: 10px; cursor:pointer; border:1px solid black; padding:5px; } .localityMenu{ display:none; padding-top:60px; } .showSelectedOpen { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #showLocalityMenuIcon { background-image: url('http://3.bp.blogspot.com/-Wm3WQQbRATQ/VS0vh82_FdI/AAAAAAAAFqM/UvFEH-CxSkk/s1600/open-citylist.png'); background-repeat: no-repeat; background-position: center; }