web-dev-qa-db-fra.com

La balise HTML <details> ne fonctionne pas dans IE / Edge

J'essaie d'ajouter une section basculante supplémentaire que l'utilisateur peut afficher et masquer.

Mes exigences:

  • pris en charge sur les principaux navigateurs (Opera, Chrome, Edge, IE11, Firefox, Safari sur Mac)
  • pas de javascript

Et envisageait d'utiliser le <details> tag, cependant le code

<details>
  <summary>Toggle</summary>
  <p>Hideable</p>
</details>

ne fonctionne pas sur les navigateurs Edge/IE.

Puis-je de toute façon "le faire" fonctionner, ou est-ce que je peux utiliser autre chose pour cette tâche? Les hacks sont OK, tant qu'aucun javascript n'est présent.

htmlinternet-explorermicrosoft-edge
8
user7499664

Ce serait la méthode :checked Suggérée en utilisant une case à cocher cachée:

.toggler {
  display: none;
}

.toggler+.toggler-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
}

.toggler:checked+.toggler-content {
  max-height: 1000px;
  opacity: 1;
}
<div>
  <label for="toggler-id-1">Toggle</label>
  <input type="checkbox" id="toggler-id-1" class="toggler" />
  <div class="toggler-content">Hideable</div>
</div>

Je préférerais toujours aller avec la solution de @ Finesse car elle vous permet d'utiliser l'élément HTML sémantiquement correct à cet effet.

5
connexo

Vous pouvez ajouter n polyfill une fois sur une page pour faire tous les <details/>s sur le travail de la page:

<!-- Inside the body -->
<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>

Je sais que c'est une solution JS mais elle ne nécessite pas d'écrire de JS pour chaque individu <details/>. Il peut être utilisé avec un texte écrit dans un éditeur WYSIWYG.

9
Finesse