Afficher, de masquer les divs sur cliquez en HTML et en CSS sans jQuery

Je veux quelque chose de très similaire à la Thématisation pliable en-têtes trouve ici:

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

Sans l'aide de JQuery, est-ce possible?

C'est pour un site mobile, mais la page est toujours en mode hors connexion donc je ne veux vraiment utiliser jquery. Donner également des styles personnalisés pour jquery mobile est beaucoup plus difficile que d'utiliser pur css et le style vous-même.

  • La page est en mode hors connexion ne signifie pas que vous ne pouvez pas utiliser jquery, il vous suffit de l'enregistrer localement.
  • C'est vrai, mais je préfère ne pas l'utiliser, de le mettre en cache. C'est pour un ios contrôle de navigateur donc je n'ai pas besoin de soutenir ie 6/7. Je voudrais aussi trouver toutes les images jquery mobile utilise et les stocker localement trop.
InformationsquelleAutor dev6546 | 2013-10-03
  1. 93

    À l'aide de label et checkbox entrées:

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

    CSS:

    .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;
}

    HTML:

    <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>

    À l'aide de label et nommé radio entrées:

    Semblables à des cases à cocher, il ferme juste le déjà ouvert un.

    Utilisation name="c1" type="radio" sur les deux entrées.

    CSS:

    .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;
}

    HTML:

    <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>

    À l'aide de tabindex et :focus

    Similaire à radio entrées, en outre, vous pouvez déclencher les états à l'aide de la Tab clé.

    En cliquant à l'extérieur de l'accordéon va fermer tous les articles ouverts.

    CSS:

    .collapse > a{
  background: #cdf;
  cursor: pointer;
  display: block;
}
.collapse:focus{
  outline: none;
}
.collapse > div{
  display: none;
}
.collapse:focus div{
  display: block; 
}

    HTML:

    <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>

    À l'aide de :target

    Similaire à l'aide de radio entrées, vous pouvez en outre utiliser Tab et ⏎ touches pour faire fonctionner

    CSS:

    .collapse a{
  display: block;
  background: #cdf;
}
.collapse > div{
  display:none;
}
.collapse > div:target{
  display:block; 
}

    HTML:

    <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>

    À l'aide de <detail> et <summary> balises (HTML pur)

    Vous pouvez utiliser HTML5 détail et résumé des balises pour résoudre ce problème sans le style CSS ou Javascript. Veuillez noter que ces balises ne sont pas pris en charge par Internet Explorer (ou Microsoft Edge).

    HTML:

    <details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

    • Belle solution, est-il possible d'avoir plus d'une élargi à un moment et être en mesure de réduire d'un c'est ouvert, par reclicking il de nouveau?
    • bien sûr, prendre un coup d'oeil à la première démo lien
    • +1 pour l'utilisation de gros caractères 🙂
    • Vous êtes un héros!
    • Merci pour les détails/résumé solution html5. Sur place! 🙂
    InformationsquelleAutor Roko C. Buljan
  2. 8

    Vous pouvez utiliser un checkbox à simuler onClick avec CSS:

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

    JSFiddle

    Adjacent frère sélecteurs

    • Pour améliorer cette réponse, vous pouvez également ajouter des effets de transition: jsfiddle.net/37RGT
    InformationsquelleAutor Vucko
  3. 3

    J'aime Roko réponse, et a ajouté quelques lignes de sorte que vous obtenez un triangle qui pointe à droite lorsque l'élément est caché, et vers le bas quand il est affiché:

    .collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " b6"; display: inline-block; }
.collapse + input:checked:after { content: " bc"; 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; }
    InformationsquelleAutor John Chew
  4. 2

    Bien sûr! jQuery est une librairie qui utilise javascript après tout.

    Vous pouvez utiliser le document.getElementById pour obtenir l'élément en question, changer sa hauteur en conséquence, par l'intermédiaire de l'élément.style.hauteur de.

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

    Étirable jusqu'à une jolie petite fonction qui approvisionne pour basculer d'avant en arrière et vous avez vous-même une solution.

    InformationsquelleAutor Ben