web-dev-qa-db-fra.com

Afficher les divs sur le clic en HTML et CSS sans jQuery

Je veux quelque chose de très similaire aux en-têtes réductibles de Theming situés ici:

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html

Est-ce possible sans utiliser JQuery?

C'est pour un site mobile, mais la page sera toujours hors ligne, donc je ne veux pas vraiment utiliser jQuery. Donner un style personnalisé à jquery mobile est également beaucoup plus difficile que d’utiliser du css pur et de le styler vous-même.

javascripthtmlcsshtml5css3
27
dev6546

Utiliser label et checkbox input

Maintient l'élément sélectionné ouvert et basculable.

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox"> 
<div>Content 1</div>

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Content 2</div>

Utiliser label et nommé radio input

Semblable aux cases à cocher, il ne ferme que celle déjà ouverte.
Utilisation name="c1" type="radio" sur les deux entrées.

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1"> 
<div>Content 1</div>

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div>Content 2</div>

Utiliser tabindex et :focus

Comme pour les entrées radio, vous pouvez en outre déclencher les états à l’aide du Tab clé.
Un clic à l'extérieur de l'accordéon fermera tous les éléments ouverts.

.collapse > a{
  background: #cdf;
  cursor: pointer;
  display: block;
}
.collapse:focus{
  outline: none;
}
.collapse > div{
  display: none;
}
.collapse:focus div{
  display: block; 
}
<div class="collapse" tabindex="1">
  <a>Collapse 1</a>
  <div>Content 1....</div>
</div>

<div class="collapse" tabindex="1">
  <a>Collapse 2</a>
  <div>Content 2....</div>
</div>

En utilisant :target

Semblable à l’utilisation de radio input, vous pouvez également utiliser Tab et ⏎ clés à utiliser

.collapse a{
  display: block;
  background: #cdf;
}
.collapse > div{
  display:none;
}
.collapse > div:target{
  display:block; 
}
<div class="collapse">
  <a href="#targ_1">Collapse 1</a>
  <div id="targ_1">Content 1....</div>
</div>

<div class="collapse">
  <a href="#targ_2">Collapse 2</a>
  <div id="targ_2">Content 2....</div>
</div>

En utilisant <detail> et <summary> tags (HTML pur)

Vous pouvez utiliser les balises detail et summary de HTML5 pour résoudre ce problème sans style CSS ni Javascript. Veuillez noter que ces balises ne sont pas prises en charge par Internet Explorer (ou Microsoft Edge).

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>
95
Roko C. Buljan

Vous pouvez utiliser un checkbox pour simuler onClick avec [~ # ~] css [~ # ~] :

input[type=checkbox]:checked + p {
    display: none;
}

JSFiddle

sélecteurs de fratrie adjacents

8
Vucko

J'aime la réponse de Roko et j'ajoute quelques lignes pour que vous obteniez un triangle indiquant le moment où l'élément est masqué et le bas lorsqu'il est affiché:

.collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " \25b6"; display: inline-block; }
.collapse + input:checked:after { content: " \25bc"; display: inline-block; }
.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none;  }
.collapse + input + * { display: none; }
.collapse + input:checked + * { display: block; }
3
John Chew

Bien sûr! jQuery est juste une bibliothèque qui utilise javascript après tout.

Vous pouvez utiliser document.getElementById pour obtenir l'élément en question, puis modifier sa hauteur en conséquence, via element.style.height.

elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';

Enveloppez cela dans une petite fonction soignée qui permet de basculer et que vous avez vous-même une solution.

2
Ben