如何实现点击后向右展开的折叠/展开区块（HTML/CSS/JS）

需求：点击「Even More Info」按钮时，内容区块向右侧展开而非默认的向下展开，现有代码中内容显示在按钮下方，需调整为右侧展开效果。

现有代码 #

HTML #

<div class="wrap-collabsible"> 
  <input id="collapsible2" class="toggle" type="checkbox" checked=""> 
  <label for="collapsible2" class="lbl-toggle">Even More Info</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p> Bacon ipsum dolor amet pork belly capicola ground round brisket. Shank pork belly cupim fatback. Flank porchetta chicken spare ribs. Ham prosciutto pork belly turkey beef picanha strip steak swine alcatra.
      </p>
    </div>
  </div>
</div>

CSS #

input[type='checkbox'] {
  display: none;
}

.wrap-collabsible {
  margin: 1.2rem 0;
}

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #DDD;
  background: #0069ff;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.25s ease-out;
  width: 200px;
}

.lbl-toggle:hover {
  color: #FFF;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
}

.toggle:checked+.lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 350px;
}

.toggle:checked+.lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: rgba(0, 105, 255, .2);
  border-bottom: 1px solid rgba(0, 105, 255, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}

.collapsible-content p {
  margin-bottom: 0;
}

修改方案 #

核心是调整布局为横向排列，同时修改过渡属性适配横向展开：

• 给容器添加弹性布局，让按钮和内容横向对齐
• 将内容区块的过渡属性从max-height改为max-width，初始宽度设为0
• 调整按钮和内容的边框圆角，匹配横向展开的视觉衔接
• 修正箭头图标的旋转角度，让交互逻辑更直观

修改后的完整CSS代码 #

input[type='checkbox'] {
  display: none;
}

.wrap-collabsible {
  margin: 1.2rem 0;
  display: flex; /* 启用弹性布局实现横向排列 */
  align-items: flex-start; /* 按钮和内容顶部对齐 */
}

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #DDD;
  background: #0069ff;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.25s ease-out;
  width: 200px;
}

.lbl-toggle:hover {
  color: #FFF;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
}

/* 调整箭头旋转方向，匹配右侧展开的交互 */
.toggle:checked+.lbl-toggle::before {
  transform: rotate(180deg) translateX(2px);
}

.collapsible-content {
  max-width: 0; /* 初始宽度为0，隐藏内容 */
  overflow: hidden;
  transition: max-width .25s ease-in-out; /* 过渡属性改为宽度变化 */
  margin-left: 0; /* 去掉间距，和按钮紧密衔接 */
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-width: 350px; /* 展开后的目标宽度 */
}

/* 按钮展开时隐藏右侧圆角，和内容区块衔接 */
.toggle:checked+.lbl-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.collapsible-content .content-inner {
  background: rgba(0, 105, 255, .2);
  border: 1px solid rgba(0, 105, 255, .45);
  border-left: none; /* 去掉左侧边框，和按钮无缝衔接 */
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
  min-height: 100%; /* 高度和按钮保持一致 */
  box-sizing: border-box;
}

.collapsible-content p {
  margin-bottom: 0;
}

说明 #

修改后，点击按钮时内容会从按钮右侧平滑横向展开，箭头图标同步翻转指向右侧，视觉和交互逻辑保持统一。HTML结构无需调整，仅修改CSS即可实现需求。

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