Автоматически сворачивать вкладку аккордеонного стиля после нажатия + значка с CSS - PullRequest
Новая
       5

Автоматически сворачивать вкладку аккордеонного стиля после нажатия + значка с CSS

2 голосов
/ 01 мая 2020

Я реализовал макет аккордового стиля вкладок на своем сайте Shopify, используя следующий код CSS: 

.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 решение (если невозможно выполнить sh это только с CSS, я бы принял что-то с JS, но это не идеально)

Спасибо!

1 Ответ

2 голосов
/ 01 мая 2020

Просто используйте флажки вместо радиовходов. 

// 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...