原生JS点击显示/隐藏

代码实现

HTML

<div class="box box1">
   <div class="btn">
      <span onclick="show1()">点击展示更多</span>
   </div>
   <div class="list list1"></div>
   <div class="more show1"></div>
</div>

JavaScript

let authorImg=[]
let str=\'\'
let str1=\'\'
  for(let i=0;i<50;i++){
    authorImg.push( {img:\'https://dss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/164.jpg\'})
 }
 for(let i=0;i<16;i++){
   str+=\'<img src="\'+authorImg[i].img+\'" />\'
  }
   for(let i=16;i<authorImg.length;i++){
     str1+=\'<img src="\'+authorImg[i].img+\'" />\'
   }
  document.getElementsByClassName(\'list1\')[0].innerHTML=str
  document.getElementsByClassName(\'show1\'[0].innerHTML=str1
  function show1(){
  if(document.getElementsByClassName(\'more\'[0].classList.contains(\'show1\')){
     document.getElementsByClassName(\'more\'[0].classList.remove(\'show1\')
  }else{
     document.getElementsByClassName(\'more\')[0].classList.add(\'show1\')
  }
}

css

.box{
    width: 500px;
    margin: 50px auto;
    text-align: center;
 }
.box img{
    width: 50px;
    height: 50px;
    background-size: cover;
  }
.btn span{
    display: inline-block;
    background: #FA5151;
    border-radius: 5px;
    color: #fff;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 5px 10px;
    cursor: pointer;
  }
.box .show1{
    display: none;
  }

.more{
    text-align: left;
  }
.more img{
   margin-right: 10px;
}