原生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;
}