Accordion Dropdown not animating properly - html

Question

I'm having some trouble with an Accordion Dropdown snippet on codepen.
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide {
0% {
max-height: 0
}
100% {
max-height: 300px
}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I want to animate the dropdown's expansion. I want it to start from the top of the container. Now, it starts from the end of the padding. Doesn't look nice. I've delayed the animation 1s so you can tell what I mean
Here's a link to my pen: https://codepen.io/b3u/pen/RBbeWy. Thanks in advance!

Answer 1

Transition instead of animation, in this case, as it is simpler.
didn't touch the animation code, just created the transition effect.
Transition on max-height will not use GPU processing so be aware of possible performance issues on mobile devices (or old computers)
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i< other.length ; i++){
other[i].style.display = "none";
}
item.style.display = "block";
}
*{
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0}
100% {max-height: 300px}
}
p {
display: block;
max-height: 0;
overflow:hidden;
padding: 0;
transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
background-color: #E5FB8B;
color: #444;
text-align: justify;
position: relative;
z-index: 0;
box-sizing:border-box;
}
p.active{
padding: 2em 1em 1em 1em;
max-height: 1000px;
transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
}
nav{
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover{
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>

Answer 2

Below an updated version of your code, the change was adding reset for padding at the top and bottom at the beginning of the animation. Hope this help.
All the best!
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0; padding-top: 0; padding-bottom: 0}
100% {max-height: 300px}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>