Expand/Contract DIV on click
Helping DamianB123 at http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28607199.html
HTML
<input id="toggleKeyInfo" type="button" value="Toggle Key Information">
<div id="wrapper">
<div id="box">
<div style="font-family:Arial; font-size: 12pt; text-align: center;"><u><b>Key Information</b></u></div>
<div style="font-family:Arial; font-size: 10pt; text-align: left; margin-top: 15px; margin-left: 7px;"><em><b>Name</b></em> - Persons Name</div>
<div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Email</b></em> - Registered email address</div>
<div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Username</b></em> - Used for logging on</div>
<div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Active</b></em> - 1 for access / 0 to disable</div>
<div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Access</b></em> - Access level granted</div>
</div>
</div>
CSS
#wrapper {
width: 250px;
height: 80px;
border-radius: 10px;
overflow: hidden;
position:absolute;
border: 2px solid #72D874;
margin-top: 30px;
cursor: pointer;
float:right;
transition: all .3s;
}
#box {
width: 250px; height: 125px;
background-color: #BEFFC0;
transition: all .3s;
}
JavaScript
$('#toggleKeyInfo').click(function () {
switch($('#wrapper').css('height') )
{
case '80px':
$('#wrapper').css('height','125px');
break;
case '125px':
$('#wrapper').css('height','80px');
break;
default:
}
});