单击以隐藏和显示分区

Question

我在页脚处有一个带有 HIDE 按钮的粘性广告，
当我单击 HIDE 时我想要。 stickyads 内容应该通过向下滑动隐藏，但是 HIDE 但应该出现，所以当我再次点击时，.stickyads 内容应该通过向上滑动出现。

CSS:

@media (max-width: 800px) {   
     .stickyads { 
      position: fixed; 
      bottom: 0px; 
      left: 0;
    } 
     
    .stickyadsHide { 
      width: 30px; 
      height: 30px; 
      display: flex;
      position: absolute; 
      right: 0px;
      top: -30px; 
    }
     
    .stickyads .stickyadsContent { 
      overflow: hidden; 
      display: block;
      position: relative;
      width: 100%;
    }
}

HTML部分：

<div class='stickyads'>
   <div class='stickyadsHide' >
      <span>HIDE</span>
   </div>
   <div class='stickyadsContent'>
      Content Here...
   </div>
</div>

Answer 1

button = document.querySelector('.stickyadsHide');
adCont = document.querySelector('.stickyadsContent');
hide = document.querySelector('.hide');
show = document.querySelector('.show');


button.addEventListener("click", () => {
    adCont.classList.toggle('visbility');
    hide.classList.toggle('visbility');
    show.classList.toggle('visbility');
});

.stickyadsHide {
    width: 50px;
    height: 50px;
}

.btn {
    position: absolute;
}

.stickyadsContent,
.btn {
    opacity: 0;
    transition: opacity 0.5s;
}

.visbility {
    opacity: 1;
    transition: opacity 0.5s;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    
    <div class='stickyads' id='removeads'>
        <div class='stickyadsHide'>
            <span class="btn hide visbility">HIDE</span>
            <span class="btn show">SHOW</span>
        </div>
        <div class='stickyadsContent visbility'>
            Content Here...
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

Answer 2

我想这就是您要找的。 slideToggle

HTML

 <div class='stickyads'>
   <div class='stickyadsHide' >
      <span>HIDE</span>
   </div>
   <div class='stickyadsContent'>
      Content Here...
   </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CSS

.stickyads { 
  position: fixed; 
  bottom: 0px; 
  left: 0;
} 
 
.stickyadsHide { 
  width: 30px; 
  height: 30px; 

}
 
.stickyads .stickyadsContent { 
  overflow: hidden; 
  display: block;
  position: relative;
  width: 100%;
}

jQuery

$('.stickyadsHide').click(function() {
  $('.stickyadsContent').slideToggle();
});

Check this link

单击以隐藏和显示分区

Click to hide and show the division

javascript

css

show-hide