I've provided the code snippet at this link: http://jsfiddle.net/LnWRL/4/:
Here is the HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div id="wrap_demo">
<div id="demo"></div>
<div id="show"></div>
<input type="button" id="click" value="click" onClick="function" />
</div>
<script>
$(document).ready(function(){
$( "#click" ).click(function() {
if($("#wrap_demo").height()==50)
$("#wrap_demo").css("height","200");
else $("#wrap_demo").css("height","50");
});
});
</script>
And, here is the CSS code:
#wrap_demo{
width:300px;
height:50px;
border:1px solid black;
float:left;
}
#demo{
width:200px;
height:50px;
background: black;
position:relative;
float:left;
padding-rignt:20px;
}
#demo:before
{
content:"";
width:150px;
height:44px;
background:white;
position:absolute;
margin:3px 50px;
float:left;
}
#show
{
width:50px;
height:50px;
background:transparent;
margin:0 0 0 200px;/*
border-width:25px;
border-color:transparent transparent transparent black;
border-style:solid; */
position:relative;
}
#show:before
{
content:"";
width:0;
height:0;
background:transparent;
border-width:25px;
border-color:transparent transparent transparent black;
border-style:solid;
position:absolute;
}
#show:after
{
content:"";
width:0;
height:0;
background:transparent;
border-width:22px;
border-color:transparent transparent transparent white;
border-style:solid;
position:absolute;
margin: 3px auto 3px 0;
}
#click{
display:block;
width:40px;
height:40px;
background:white;
border-radius:50%;
border:1px solid black;
position:absolute;
top:13px;
left:170px;
font-size:12px;
line-height:30px;
text-align:center;
cursor:pointer;
}
#click:focus{
outline:none;
}
Seeking guidance on how to smoothly increase the height of wrap_demo using jQuery animation effects.