I have a div that is one "line" in height. When a button is clicked, I want it to disappear and simultaneously another div with more lines should appear. I have managed to make this work, but no matter what I do, the one-line div disappears very quickly almost as if there is no transition at all. However, for the multiline div, it works perfectly.
My question is how can I achieve a smooth transition for the one-line div so that it doesn't just disappear abruptly? I need it to vanish slowly while also vacating its place, which is why I initially used the max-height method.
HTML code:
<div id="Simple" class="Hide Show">
<div>1. simple</div>
</div>
<input type="Button" OnClick=" $('#Simple').removeClass('Show');$('#Advanced').addClass('Show');" value="Switch" />
<div id="Advanced" class="Hide">
<div>1. advanced</div>
<div>2. advanced</div>
<div>3. advanced</div>
<div>4. advanced</div>
</div>
CSS classes:
.Hide {
max-height: 0;
transition: max-height 0.2s ease;
overflow: hidden;
}
.Show {
max-height: 500px;
transition: max-height 0.7s ease-in;
}
Link to a fiddle containing the code: https://jsfiddle.net/7u12yvm0/
Additional information: I am using Internet Explorer (it should be compatible with IE11).