手风琴效果

鼠标放上展开，其余折叠。效果如图。（记得引入jq）

 .accordion {
      width: 585px;
      height: 505px;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      border-radius: 10px;
    }

    .accordion .imgFqBox {
      width: 585px;
      height: 280px;
      position: absolute;
      display: block;
      transition: .5s;
      -webkit-transition: .5s;
      -moz-transition: .5s;
      -o-transition: .5s;
      -ms-transition: .5s;
    }

    .accordion img {
      width: 585px;
      height: 280px;
      display: block;
    }

    .accordion p {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 75px;
      line-height: 75px;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: #fff;
      background: url("../img/pic-bg2.png") top center repeat-x
    }

    .accordion p a {
      display: block;
      width: 100%;
      height: 75px;
      color: #fff;
    }

<div class="accordion" id="s1" data-visible="">
    <div class="imgFqBox dh_modular_news" style="top: 0"><a href="" target="_blank"><img
          src="https://file.dahe.cn/image/png/20230220/1676862142700420.png" alt=""></a>
      <p><a href="" target="_blank">写意中国——探寻汉字起源</a></p>
    </div>
    <div class="imgFqBox dh_modular_news" style="top: 280px;"><a href="" target="_blank"><img
          src="https://file.dahe.cn/image/png/20220928/1664350927083787.png" alt=""></a>
      <p><a href="" target="_blank">让世界“中意”中国</a></p>
    </div>
    <div class="imgFqBox dh_modular_news" style="top: 350px;"><a href="" target="_blank"><img
          src="https://file.dahe.cn/image/png/20220928/1664351135650703.png" alt=""></a>
      <p><a href="" target="_blank">赶考路上再寻焦裕禄 </a></p>
    </div>
    <div class="imgFqBox dh_modular_news" style="top: 420px;"><a href="" target="_blank"><img
          src="https://file.dahe.cn/image/png/20220914/1663118479227494.png" alt=""></a>
      <p><a href="" target="_blank">聚焦十大战略 共绘出彩河南</a></p>
    </div>
  </div>

    $(function () {
      var oBox1 = document.getElementById("s1");
      var aimg1 = oBox1.getElementsByClassName("imgFqBox")
      var nowimg1 = 0
      for (i = 0; i < aimg1.length; i++) {
        aimg1[i].index = i
        aimg1[i].onoff = false
        aimg1[i].onmouseover = function () {
          if (this.index > nowimg1) {
            for (p = nowimg1 + 1; p <= this.index; p++) {
              aimg1[p].style.top = parseInt(aimg1[p].style.top) - 205 + 'px'
            }
            nowimg1 = this.index
          } else {
            for (p = this.index + 1; p <= nowimg1; p++) {
              aimg1[p].style.top = parseInt(aimg1[p].style.top) + 205 + 'px'
            }
            nowimg1 = this.index
          }
        }
      }
    })