web-dev-qa-db-fra.com

Listes réductibles utilisant HTML et CSS

J'ai une liste réductible mise en œuvre en utilisant HTML et CSS. La liste fonctionne correctement, mais j'ai besoin d'une petite modification.

Chaque fois que je clique sur un élément de la liste, il se développe. Mais lorsque je clique sur un autre élément de la même liste, l'élément précédemment développé est réduit alors que celui sur lequel vous cliquez est développé.

Aidez-moi à appliquer le comportement qui permet d’agrandir plusieurs éléments de la liste en même temps.

Je veux que ce soit fait en HTML et CSS uniquement.

Voici la mise en œuvre que j'ai actuellement. Styles CSS:

.row { vertical-align: top; height: auto !important; }
list { display: none; }
.show { display: none; }
.hide:target + .show { display: inline; }
.hide:target { display: none; }
.hide:target ~ .list { display:inline; }
@media print { .hide, .show { display: none; } }

Et le balisage HTML:

<div class="row">
  <a href="#hide1" class="hide" id="hide1">Expand</a>
  <a href="#show1" class="show" id="show1">Collapse</a>
  <div class="list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>
html5css3
17
user3881003

Si vous utilisez un navigateur moderne, vous pouvez simplement utiliser HTML5 comme ceci:

<details>
  <summary>See More</summary>
  This text will be hidden if your browser supports it.
</details>

57
Ananth

Pure HTML et CSS
Une case à cocher et son état :checked semble correspondre parfaitement à votre cas: 

[id^="togList"],                        /* HIDE CHECKBOX */
[id^="togList"] ~ .list,                /* HIDE LIST */
[id^="togList"] + label  span + span,   /* HIDE "Collapse" */
[id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
  display:none;
}
[id^="togList"]:checked + label span + span{
  display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
}
[id^="togList"]:checked ~ .list{
  display:block;                        /* SHOW LIST (IF CHECKED) */
}
<div class="row">
  <input id="togList1" type="checkbox">
  <label for="togList1">
    <span>Expand</span>
    <span>Collapse</span>
  </label>
  <div class="list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

12
Roko C. Buljan

Sur la base des réponses ci-dessus, nous venons de créer un seul code HTML avec CSS et JS incorporés pour ce type de tâche . GitHub repo , le lien restera valide car je n’ai pas l’intention de le supprimer.

1
Leedehai