J'essaie de basculer avec css3 mais cela ne fonctionne pas. Quelqu'un a une solution? Pourquoi je ne peux pas utiliser input:checked ~ dans ce cas?

Voici mon code: https://codeshare.io/axvvZB

0
Unnamed 16 janv. 2017 à 10:50

2 réponses

Meilleure réponse
.show-more #toggle:checked ~ .toggle-content { ... }

Le sélecteur ci-dessus ne fonctionnera que lorsque div.toggle-content sera l'enfant de div.show-more et placé après input#toggle dans le code HTML.

Votre structure de code doit être:

<div class="show-more">
  <label for="toggle">VIEW ALL</label>
  <input id="toggle" type="checkbox" style="visibility:hidden">
  <div class="toggle-content">
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <div class="fade"></div>
  </div>
</div>
.toggle-content {
  height:5px;
  overflow: hidden;
  transition:all 1s linear;
}

.toggle-content .fade {
  bottom: -20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 100px;
  position: absolute;
  width: 100%;
  display: inline-block;
}

.show-more {
  margin: 10px auto;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  display: block;
  background: #2196F3;
}
.show-more label {
  color: #fff!important;
  text-decoration: none;
  cursor: pointer;
}

.show-more #toggle:checked ~ .toggle-content{
  height:auto
}
<div class="show-more">
  <label for="toggle">VIEW ALL</label>
  <input id="toggle" type="checkbox" style="visibility:hidden">
  <div class="toggle-content">
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <div class="fade"></div>
  </div>
</div>
1
Mohammad Usman 16 janv. 2017 à 07:59

Vous utilisez le sélecteur frère en css (~) mais vos éléments dans le balisage ne sont pas les frères de l'élément input.

Vous devez faire de .toggle-content le frère de #toggle pour que cela fonctionne.

Référez-vous au code:

.toggle-content {
  height: 5px;
  overflow: hidden;
  transition: all 1s linear;
}

.toggle-content .fade {
  bottom: -20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 100px;
  position: absolute;
  width: 100%;
  display: inline-block;
}

.show-more {
  margin: 10px auto;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  display: block;
  background: #2196F3;
}

.show-more label {
  color: #fff!important;
  text-decoration: none;
  cursor: pointer;
}

.show-more #toggle:checked ~ .toggle-content {
  height: auto
}
<div class="show-more">
  <label for="toggle">VIEW ALL</label>
  <input id="toggle" type="checkbox" style="visibility:hidden">
  <div class="toggle-content">
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <div class="fade"></div>
  </div>
</div>
1
nashcheez 16 janv. 2017 à 07:55