When I click on an element with the ID "id", I use toggleClass to resize a div from 10px to 500px in width. This is done partly to show/hide content. However, the issue arises when the transition occurs and the contents of the div start rearranging, overflowing, and eventually disappearing.
Here is the JavaScript code (using jQuery 2.1.1):
$( "#id" ).click(function() {
$( "div.login" ).toggleClass( "closed_div" );
});
The CSS styling for the transition:
* {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.div {
height: 10px;
width: 500px;
}
.closed_div {
overflow: hidden;
width: 10px;
}
And here is the HTML structure:
<div class="div closed_div">
Content
</div>