如何实现点击滑块隐藏中间文本框，仅显示滑块与图片？

要实现点击滑块后文本框平滑收缩隐藏的效果，核心是利用CSS过渡（transition）配合复选框状态控制元素尺寸——display: none不支持过渡动画，所以改用尺寸收缩的方式实现。以下是修改后的完整代码及关键说明：

关键修改点 #

• 修复类名不一致：HTML中的textwrap改为text-wrap，与CSS选择器匹配
• 给text-wrap添加过渡属性和弹性布局属性，让它能平滑收缩
• 利用复选框:checked状态，通过兄弟选择器控制text-wrap宽度收缩至0
• 调整布局细节，确保滑块和图片在文本收缩后位置稳定

修改后的完整代码 #

CSS #

.infocard {
  display: grid;
  border-radius: 15px;
  max-width: 80%;
  width: auto !important;
  max-height: 300px;
  background: white;
  overflow: hidden; /* 避免收缩时内容溢出容器 */
}

.cardcontent {
  display: flex;
  height: 300px; /* 固定高度，防止布局跳动 */
}

.cardimage {
  width: 400px; /* 固定图片宽度 */
  height: 100%;
  object-fit: cover; /* 图片自适应容器 */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.cardslider {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  width: 7%;
  min-width: 50px; /* 固定滑块最小宽度 */
  background-color: #5E6282;
  display: flex;
  justify-content: center;
  align-items: center; /* 箭头垂直居中 */
}
.anglebracket {
  transition: transform 0.5s ease; /* 简化过渡属性 */
}

.imgholder {
  height: 50px;
  width: 30px;
  display: flex;
  justify-content: center;
  cursor: pointer; /* 添加点击指针提示 */
}
.clickables {
  display: none;
}

.clickables + label {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0; /* 移除默认padding，让整个滑块区域可点击 */
}

.clickables:checked + label .imgholder img {
  transform: rotate(180deg);
}
.cardtext {
  padding-left: 5%;
  padding-top: 5%;
  overflow: hidden;
}
.text-wrap {
  flex: 1; /* 占据滑块和图片之外的剩余空间 */
  overflow: hidden;
  transition: all 1s ease; /* 添加1秒过渡动画 */
  min-width: 0; /* 允许flex子元素收缩到0宽度 */
}
/* 复选框选中时，收缩文本容器 */
.clickables:checked ~ .text-wrap {
  max-width: 0;
  padding: 0;
}
.container {
  width: 100%;
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 1rem);
  margin-right: auto;
  margin-left: auto;
}
.col-lg-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 40%;
}
.fs-xl-10 {
  font-size: 3.24732rem !important;
}

HTML #

<div class="container">
  <div class="mb-4 text-start">
    <h5 class="text-secondary">It's not hard to become a better friend to the environment</h5>
    <h3 class="fs-xl-10 fs-lg-8 fs-7 fw-bold font-cursive text-capitalize mg ">How to be a more <span class="greengrad">Eco-Friendly</span> Person</h3>
  </div>
  <div class="infocard">
    <div class="cardcontent">
      <div class="cardslider">
        <input type="checkbox" class="clickables" id="checkbox">
        <label for="checkbox">
          <div class="imgholder"><img src="assets/img/down-arrow.png" width="25px" class="anglebracket angleflip" id="angleb"></div>
        </label>
      </div>
      <div class="text-wrap">
          <div class="cardtext">
              <h3 class="sectext" style="margin-bottom: 4%;">Get <span class="fw-bold">Electric</span>  or <span class="fw-bold">Fuel-Efficient</span> vehicles </h3>
              <p class="sectext">While an Electric vehicle is the best option of the two, getting a vehicle that consumes less gasoline is also a decent option.</p>
          </div>
      </div>
      <div class="cardimage"><img src="assets/img/car.jpg" style="border-top-right-radius: 15px; border-bottom-right-radius: 15px;" height="300" width="400"> </div>
    </div>
  </div>
</div>

原理说明 #

1. 弹性布局适配：cardcontent使用flex布局，text-wrap设为flex:1占据剩余空间，滑块和图片固定宽度，保证布局结构稳定。
2. 过渡动画实现：给text-wrap添加transition: all 1s ease，当复选框选中时，通过max-width:0让文本容器平滑收缩，同时清空padding消除内部间距。
3. 无JS交互控制：利用CSS兄弟选择器~，通过复选框的checked状态直接控制后续元素样式，无需额外JavaScript代码。

内容的提问来源于stack exchange，提问作者GoldEnCD