Take a look at this demo link: http://jsbin.com/labuxuziraya/1/edit
I encountered an issue where the button stops working after adding an if condition. I suspect there are some minor bugs in the code, but my level of experience is not enough to pinpoint them.
Your help would be greatly appreciated.
Here's the HTML code snippet:
<div class="div1 active">press outside the div to expand again</div>
<span class="btn btn-default">toggle to expand<span>
And here's the CSS snippet:
div {
background: lightgrey;
width: 200px;
height: 400px;
float: left;
padding: 15px;
margin: 15px;
}
.active {
width: 50px;
}
Finally, the JavaScript code:
function Trigger() {
$('.div1').toggleClass('active');
}
$('.btn').on('click',function(){
Trigger();
});
$(document).click(function(event) {
if(!$(event.target).closest('.div1').length)
{
if( $('.div1').hasClass('active') )
{Trigger();}
});