Implementation of vertical accordion effect with native JavaScript

The effect is as follows:

Figure (1） Before expansion

Figure (2） After expansion

The code is as follows:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <style>
  *{ margin: 0; padding: 0; }
  .panel {
 width: 555px;
 height: auto;
 background-color: #333333;
 margin: 50px auto;
  }
  .panel-title {
  width: 100%;
  height: 68px;
  text-align: center;
  font: 600 18px/68px '微软雅黑';
  color: #fff;
  cursor: pointer;
  }
  .collapse {
  width: 100%;
  height: 0;
  background-color: #167EA0;
  overflow: hidden;
  }
  .collapse p {
  color: #fff;
  font: 500 16px '微软雅黑'; 
  text-indent: 2em; 
  padding: 20px 20px 0 20px;
  }
  #One,#Tow,#Three{
  border-top: solid 1px #ccc;
  }
 </style>
 </head>
 <body>
 <div class="panel" id="panel">
 <h4 class="panel-title" id="panel-title">1 《抉择》</h4>
 <div class="collapse" id = "One"><p></p></div>
 <h4 class="panel-title" id="panel-title">2 《生命》</h4>
 <div class = "collapse" id="Tow"><p></p></div>
 <h4 class="panel-title" id="panel-title">3 《大小》</h4>
 <div class = "collapse" id="Three"><p></p></div>
 <h4 class="panel-title" id="panel-title">4 《崇拜》</h4>
 <div class = "collapse" id="Four"><p></p></div>
 </div>
 </body>
 <script>
 function animate(obj,json,endFn){
 //Close the previous timer
 clearInterval(obj.timer); 
 //Manage the timer
 obj.timer = setInterval(function(){
 //Timer switch, used to determine whether to start the timer
 var flag = true;
 //Traverse json 
 for(var arrt in json){
 //Calculate the step Step = target position - Current position
 var step = (json[arrt] - parseInt(getStyle(obj,arrt))) / 5;
 //Step rounding
 step = step > 0 ? Math.ceil(step): Math.floor(step);
 //Box movement: The current position of the box + Step rounding
 obj.style[arrt] = parseInt(getStyle(obj,arrt)) + step + 'px';
 //If any of them does not meet the conditions, do not stop the timer
 if(parseInt(getStyle(obj,arrt)) != json[arrt]){
 flag = false;
 }  
 }
 //Close the timer
 if(flag){
 clearInterval(obj.timer);
 //2Execute the callback function after seconds
 setTimeout(function(){
 //Determine if there is a callback function, execute the callback function if there is endFn
 endFn&&endFn();
 },1000) 
 }
 },20);
 } 
 //Obtain the current style
 function getStyle(obj,arrt){
 //Compatibility with ie
 return obj.currentStyle? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
 }
 var panel = document.getElementById("panel");
 var oH = panel.getElementsByTagName('h';4);
 var oDiv = panel.getElementsByTagName('div'); 
 In the life of a person, there is often a state of choice, such as: which university to attend? Which kind of career to choose? Which kind of woman to marry?... etc., things that make one's head ache. Whether a person has the power of choice or not can show whether their personality is mature or not. It is those who have no opinions who are not suffering from the pain of choice. Because when it comes to the time when a decision needs to be made, they always ask others: 'Hey, what do you think should be done?' Generally speaking, those who can achieve great achievements are those with strong power of choice. They know that the success or failure of an event depends entirely on the fact that no one can take over, and no one can make the decision for you. At the moment of choice, success or failure has already shown its traces.
 for(var i = 0;i<oH.length;i++{
 oH[i].index = i;
 oH[i].onclick = function(){
 for(var j = 0;j<oH.length; j++{
 animate(oDiv[j],{height:0});
 }
 if(parseInt(getStyle(oDiv[this.index],'height')) == 0){
 animate(oDiv[this.index],{height:210}); 
 oDiv[this.index].children[0].innerHTML = str[this.index]; 
 }
 animate(oDiv[this.index],{height:0});
 }
 }
 } 
 </script>
</html>

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work, and I also hope to get more support for the Shouting Tutorial!

Declaration: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @ when sending email) and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial