CSS только слайд при установке флажка

Question

Я хочу создать эффект слайд-апа на флажке без JS, поэтому чисто css. Проблема в том, что мы не можем использовать JS на этой странице.

Я смотрю на очень многих сайтах, но все они говорят что-то другое, и большинство используют JS.

Мой HTML:

<label>
 <input class="open-content" type="checkbox">
  <div class="label-container">
   <div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
   <div style="font-size: 32px; font-weight: 700;">+</div>
  </div>
  <div class="content-open fade-new">Show this content with slidedown</div>
</label>

Мой CSS:

<style type="text/css">
.open-content:checked ~ .content-open {
 visibility: visible!important; max-height: none!important;
 padding: 20px 0px 20px 20px;
 margin-top: 30px;
}

.fade-new { 
 transition: visbility 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

.content-open {
 max-height: 0px;
 visibility: hidden;
 background-color: #F5F5F5;
}
</style>

И как это выглядит:

Но это не анимирован Я использовал непрозрачность от 0 до 1, и это работает для создания хорошей анимации, но я предпочитаю скользить вниз, если это возможно с помощью checkbox + pure CSS. Кто-нибудь знает как это сделать?

Answer 1

Да, можно создать чистый CSS раскрывающийся список, используя хак с флажком .

В этом примере я отделил <label> от <input> и связал их:

• , давая <input> id
• , давая <label> соответствующий for атрибут

Рабочий пример (Версия 1):

Эта версия скользит вниз.

.open-content {
 display: none;
}

.label-text {
  position: relative;
  display: block;
  z-index: 12;
  height: 32px;
  line-height: 32px;
  padding: 6px;
  color: #EC008C;
  font-size: 20px;
  font-weight: 700;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.label-text::after {
  content: '+';
  display: inline;
  color: rgb(0, 0, 0);
  font-size: 32px;
  font-weight: 700;
  vertical-align: bottom;
}

.content {
 position: relative;
 display: inline-block;
 z-index: 6;
 padding: 6px;
 background-color: #F5F5F5;
 opacity: 0;
 transform: translateY(-50px);
 transition: all 0.6s linear;
}

.open-content:checked ~ .content {
 opacity: 1;
 transform: translateY(0);
}

<input id="open-content" class="open-content" type="checkbox">

<label class="label-text" for="open-content">
Open this tab
</label>

<div class="content">
<p>Show this content with slidedown</p>
</div>

---

Рабочий пример (версия 2):

Эта версия разворачивается.

.open-content {
 display: none;
}

.label-text {
  position: relative;
  display: block;
  z-index: 12;
  height: 32px;
  line-height: 32px;
  padding: 6px;
  color: #EC008C;
  font-size: 20px;
  font-weight: 700;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.label-text::after {
  content: '+';
  display: inline;
  color: rgb(0, 0, 0);
  font-size: 32px;
  font-weight: 700;
  vertical-align: bottom;
}

.content {
 position: relative;
 display: inline-block;
 z-index: 6;
 padding: 6px;
 height: 0;
 background-color: #F5F5F5;
 opacity: 0;
 overflow: hidden;
 transition: all 0.6s linear;
}

.open-content:checked ~ .content {
 opacity: 1;
 height: 120px;
}

<input id="open-content" class="open-content" type="checkbox">

<label class="label-text" for="open-content">
Open this tab
</label>

<div class="content">
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
</div>

---

Дополнительная литература:

• "Взлом флажка" (и все, что вы можете с ним сделать) - CSS Трюки

Answer 2

Я надеюсь, что это поможет вам

Вы также можете использовать css анимация

.fade-new{
height:0;
background:red;
opacity:0;
transition:1s;
}

.open-content:checked ~ .fade-new{
height:300px;
opacity:1;
transition:1s;
}

<label>
 <input class="open-content" type="checkbox">
  <div class="label-container">
   <div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
   <div style="font-size: 32px; font-weight: 700;">+</div>
  </div>
  <div class="content-open fade-new">Show this content with slidedown</div></span>
</label>