js to achieve simple accordion effect

This article shares the specific code of js to achieve the accordion effect for your reference. The specific content is as follows

Effect:

Implementation code:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin:0;
    padding:0;
   }
   ul,li{
    list-style:none;
   }
   .box{
    width:1200px;
    height:260px;
    margin:50px auto 0;
    overflow: hidden;
   }
   .list{
    width:2000px;
    height:260px;
   }
   .list>li{
    width:200px;
    height:260px;
    float:left;
    background-image:url(images/1.jpg);
    background-position:center center;
    background-repeat:no-repeat;
   }
   .list>li:nth-child(2){
    background-image:url(images/2.jpg);
   }
   .list>li:nth-child(3){
    background-image:url(images/3.jpg);
   }
   .list>li:nth-child(4){
    background-image:url(images/4.jpg);
   }
   .list>li:nth-child(5){
    background-image:url(images/5.jpg);
   }
   .list>li:nth-child(6){
    background-image:url(images/6.jpg);
   }
  </style>
 </head>
 <body>
  
  <div class="box">
   <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  
  <script src="js/startmove.js"></script>
  <script>
   
   var oLis = document.getElementsByClassName("list")[0].children;
   
   for(var i = 0; i < oLis.length; i++){
    oLis[i].onmouseover = function(){
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:160
      },50)
     }
     startMove(this,{
      width:400
     },50)
    }
    oLis[i].onmouseout = function(){
     
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:200
      },10)
     }
    }
   }
   
   
  </script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Pure js to achieve accordion effect code
Use ReactJS to implement tab page switching, menu bar switching, accordion switching and progress bar effects
js to achieve a simple accordion effect
Accordion effect navigation menu made by native js
Vue.js accordion menu component development example
js realizes the effect of foldable and expandable accordion menu
Pure js to achieve accordion effect
JS realizes the picture accordion effect
Native JS to achieve vertical accordion effect
Html5 js to achieve accordion effect

<<: Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

>>: Problems and solutions when installing and using VMware