javascript - 单击带有 CSS 的 + 图标后自动折叠 Accordion 样式选项卡

Question

我使用以下 CSS 代码在我的 Shopify 网站上实现了 Accordion 选项卡样式布局:

.so-tab {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 25px 0;
}

.so-tab label {
  position: relative;
  display: block;
  padding: 0 25px 0 0;
  margin-bottom: 15px;
  line-height: normal;
  cursor: pointer;
  font-weight: bold;
}

.so-tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.so-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s;
}


/* :checked */

.so-tab input:checked~.so-tab-content {
  max-height: none;
}


/* Icon */

.so-tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.so-tab input[type=checkbox]+label::after {
  content: "+";
}

.so-tab input[type=radio]+label::after {
  content: "+";
}

.so-tab input[type=checkbox]:checked+label::after {
  transform: rotate(315deg);
}

.so-tab input[type=radio]:checked+label::after {
  transform: rotateX(180deg);
}

<div class="so-accordion-wrapper">


  <div class="so-tab"><input id="so-tab-1" type="radio" name="tabs"> <label for="so-tab-1">FEATURES</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-2" type="radio" name="tabs"> <label for="so-tab-2">DESCRIPTION</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-3" type="radio" name="tabs"> <label for="so-tab-3">SPECS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-4" type="radio" name="tabs"> <label for="so-tab-4">DETAILS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>



</div>

它工作得很好，只是为了折叠打开的选项卡，需要单击不同选项卡的 + 图标。在选项卡已打开后，无法仅通过再次单击 + 图标来折叠打开的选项卡。我想在我的代码中实现这个功能。请记住，我还想保留一次仅打开一个选项卡的当前功能(因此，如果用户单击“功能”选项卡，然后单击“描述”，“功能”选项卡必须自动关闭)

请注意，我正在寻找一个纯粹的 CSS 解决方案(如果单独使用 CSS 无法完成此任务，我会接受使用 JS 的解决方案，但这并不理想)

谢谢!

Answer 1

只需使用复选框而不是单选输入。

// Uncheck others
var inputs = document.querySelectorAll(".so-accordion-wrapper input[type=checkbox]");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("click", function(e) {
    var others = document.querySelectorAll(".so-accordion-wrapper input[type=checkbox]:not(#" + e.target.id + ")");
    for (var j = 0; j < others.length; j++) {
      others[j].checked = false;
    }
  });
}

.so-tab {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 25px 0;
}

.so-tab label {
  position: relative;
  display: block;
  padding: 0 25px 0 0;
  margin-bottom: 15px;
  line-height: normal;
  cursor: pointer;
  font-weight: bold;
}

.so-tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.so-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s;
}


/* :checked */

.so-tab input:checked~.so-tab-content {
  max-height: none;
}


/* Icon */

.so-tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.so-tab input[type=checkbox]+label::after {
  content: "+";
}

.so-tab input[type=radio]+label::after {
  content: "+";
}

.so-tab input[type=checkbox]:checked+label::after {
  transform: rotate(315deg);
}

.so-tab input[type=radio]:checked+label::after {
  transform: rotateX(180deg);
}

<div class="so-accordion-wrapper">
  <div class="so-tab"><input id="so-tab-1" type="checkbox" name="tabs"> <label for="so-tab-1">FEATURES</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-2" type="checkbox" name="tabs"> <label for="so-tab-2">DESCRIPTION</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-3" type="checkbox" name="tabs"> <label for="so-tab-3">SPECS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>


  <div class="so-tab"><input id="so-tab-4" type="checkbox" name="tabs"> <label for="so-tab-4">DETAILS</label>
    <div class="so-tab-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
</div>