Initially, I have a div with a max-height of 0 to hide it. When an anchor is clicked, the div's max height changes to 800px, revealing its content. However, every time this transition happens, the page automatically scrolls to the top instead of maintaining its position.
Below is the HTML code:
<main class="outer-container">
<div class="wrapper">
<div class="text-container">
<div class="text">
<a class="reveal-hide" href="#">Show Hidden Div</a>
<div class="hide">
<!-- hidden div -->
</div>
</div>
</div>
</div>
</main>
and here is the CSS code:
.outer-container {
display: block;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
.wrapper {
margin-top: 100px;
box-sizing: border-box;
padding: 30px;
position: relative;
}
.text-container {
max-width: 600px;
padding: 30px;
margin: 0 auto;
}
.hide {
max-height: 0;
overflow-y: hidden;
-webkit-transition: max-height 0.4s ease-in-out;
-moz-transition: max-height 0.4s ease-in-out;
-ms-transition: max-height 0.4s ease-in-out;
-o-transition: max-height 0.4s ease-in-out;
transition: max-height 0.4s ease-in-out;
}
.hide-is-showing {
max-height: 1000px;
}
and finally, the jQuery script:
$(document).ready(function() {
$('.reveal-hide').on('click', function() {
$(".hide").addClass("hide-is-showing");
});
});
If you're wondering why the page scrolls to the top during each transition and how to fix it, let's find out below!