Wednesday, May 23, 2012

How to add icon in button when slide down in jquery

enter image description hereI did some code for jquery sliding-toggle div but for now i want to adding icon in button when sliding down i want to show a small arrow icon bottom of the open content button. when i click again on open content button that icon want to remove.



go through the following path for see the code.
jsfiddle link



<div id="btn-div">Open content</div>
<div id="content-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br class="clear"/>
</div>




body{
font:12px/18px Arial;
color:white;
}
#btn-div{
background:blue;
padding:10px;
font-size:14px;
line-height:20px;
color:white;
width:100px;
}
#content-div{
background:#106DCD;
display:none;
padding:10px;
}
.clear{
clear:both;
}?




 $('#btn-div').live('click', function() {
$("#content-div").slideToggle("slow");
});?


?





No comments:

Post a Comment