Expand Div on Click With Smooth Animation

Expand div container with animation with text in it

If you add overflow: hidden to the expanding element, the text won't just pop in automatically on the page - the text will be hidden/clipped in the expanding element by default, and as it expands, it will reveal text as the height increases. I also adjusted the base height of the expanding element.

    <html>    <style>
    body, html {    height: 100%;    background-color: black; text-align: center; font-family: 'Roboto', sans-serif; margin: 0;    }
    p.italic {  font-size: 150%; line-height: 50px; font-style:italic;    }
    p {  font-size: 100%; line-height: 25px;    }
    h1 {     font-size: 400%;    }
    .container1 {    background-color:white;    margin-left:50px;    margin-right:50px;    transition: all 2s ease;    overflow: hidden;    height: 100px;    }
    .container1expanded {    height: 280px;    transition: all 2s ease;    line-height: normal;    }
    .container1 h1 {     font-size: 400%;    line-height: 40px;    }
    #container1p {    display: none;    transition: all 2s ease;    }    <body>    </style>    <script type="text/javascript">    function expand(){        document.getElementById("container1").style.height= "280px";        document.getElementById("container1p").style.display= "block";    }
    </script>    <div class="container1" id="container1">    <h1 onclick="expand()">Lorem ipsum</h1>    <div id="container1p">    <p class="italic">Lorem ipsum dolor sit amet</p>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur                                             venenatis eget felis at tempor. Phasellus bibendum auctor massa condimentum venenatis.     </p>    </div>    </div>    </body>    <html>

div expanding animation max-height doesn't work. always height is 0

Don't use max-height, class for animation. Directly set the transition and height in CSS and JS respectively:

Key points:

Set initial height and transition in the CSS rule.
Increase only height from JS. Adding class does not trigger the CSS animation

JS:

    setTimeout(function() { //setTimeout is to add a delay.
        var expandDiv = document.getElementsByClassName('popupLayer')[0];
        expandDiv.style.display = 'block';
        expandDiv.style.top = '55%';
        setTimeout(function() {
            expandDiv.style.height = '55%'; // This is also for showing the animation.
        }, 1000);
    }, 4000);

CSS:

            .popupLayer {
                 position: absolute;
                 width: 76%;
                 left: 50%;
                 top: 0%;
                 transform: translate(-50%, -55%);
                 outline: 1px solid red;
                 display: none;
                 background-color: white;
                 border-radius: 25px;
                 overflow: hidden;
                 transition: height 4s ease-in;
                 height: 0; // Animation works if you set initial height
             }

Demo: https://jsfiddle.net/lotusgodkk/GCu2D/6016/

How can I make a smooth expanding div from the bottom up to 85% of the viewport?

To change between two states, expanded and collapsed, you'll need some kind of JavaScript.

As far as the CSS, I'd suggest for #wrapper instead of using bottom: 0, using something like top: calc(100% - 42px) (the 42px should be whatever the height you want to be visible) for the collapsed state, and then top: 15% for the expanded state.

For the "smooth" part of it, you just need to add a transition animation.

Here's a basic codepen showing what I mean: https://codepen.io/milesgrover/pen/gOpbrpd

How to display a div with a smooth transition with Vanilla JavaScript

For the divs to expand smoothly, you have to set a final state height - not "auto" - and the transition must include the change of height.

Thus:

function seeMore() {
  const text = document.getElementById('website-info-idea')
  const text2 = document.getElementById('website-info-technical')
  text.classList.toggle("show")
  text2.classList.toggle("show")
}

.col {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.col.show {
  opacity: 1;
  height: 23px;
  transition: all 1s ease-in-out;
}

<a onclick="seeMore()" class="btn btn-secondary btn-md btn-custom">About this Website</a>

<div class="col" id="website-info-idea">Idea</div>
<div class="col" id="website-info-technical">Technical</div>

CSS Expand / Contract Animation to Show/Hide Content

You can achieve this using the CSS transition along with toggled styles. Initially you may think to transition the height (from 0 to initial so that it expands dynamically based on height) but unfortunately CSS transition doesn't properly handle this.

Instead, you can wrap it in a container of its own with overflow: hidden and then use a margin-top: -100% to hide it, and 0 to show it.

Here is your code with this modification:

function expandContract() {   const el = document.getElementById("expand-contract")   el.classList.toggle('expanded')   el.classList.toggle('collapsed')}

#container {   border: 1px solid black;   padding: 15px;}
#top-section {  border-bottom: 1px solid red;}
#expand-container {  overflow: hidden;}
#expand-contract {  border-bottom: 1px solid red;  margin-top: -100%;  transition: all 1s;}
#expand-contract.expanded {   background-color: green;   margin-top: 0;}

<div id="container">  <div id="top-section">    This is always displayed  </div>    <div id="expand-container">    <div id="expand-contract" class="expanded">      This section expands and contracts        <table>        <tr><td>test1</td></tr>        <tr><td>test2</td></tr>        <tr><td>test3</td></tr>        <tr><td>test4</td></tr>      </table>    </div>  </div>    <div id="bottom-section">    This section is always displayed  </div></div>
<button onclick="expandContract()">Expand/Contract</button>

Make Div Expand Smoothly

Theres really no point in re-inventing the wheel. You can do this pretty easily with Jquery's slidetoggle. Here is the page: http://api.jquery.com/slideToggle/

Add CSS3 transition expand/collapse

This is my solution that adjusts the height automatically:

function growDiv() {  var growDiv = document.getElementById('grow');  if (growDiv.clientHeight) {    growDiv.style.height = 0;  } else {    var wrapper = document.querySelector('.measuringWrapper');    growDiv.style.height = wrapper.clientHeight + "px";  }  document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';}

#more-button {  border-style: none;  background: none;  font: 16px Serif;  color: blue;  margin: 0 0 10px 0;}
#grow input:checked {  color: red;}
#more-button:hover {  color: black;}
#grow {  -moz-transition: height .5s;  -ms-transition: height .5s;  -o-transition: height .5s;  -webkit-transition: height .5s;  transition: height .5s;  height: 0;  overflow: hidden;}

<input type="button" onclick="growDiv()" value="Read more" id="more-button">
<div id='grow'>  <div class='measuringWrapper'>    <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit      amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>  </div></div>