Élargir tous les tags de détails

Question

Quelqu'un sait-il s'il existe un moyen de créer un lien tout développer pour les pages qui utilisent la balise sémantique <details>? J'ai réussi à créer un lien qui ouvrirait automatiquement les détails fermés: Link to details section that expands details section as well

Maintenant j'essaye d'ajouter un lien qui développera tous <details>.

Je suppose que vous pouvez le faire avec javascript mais je suis faible là-bas. Quelque chose à l'effet de cliquer sur un lien qui lance un script qui trouve tous "< détails dans le code html et insérer le mot « ouvert » avant d'afficher le code html. Peu d'aide serait appréciée.

Jusqu'à présent I'v a

<button onclick="openAll()">Expand All</button> 

<script>function openAll() { 
    var x = document.getElementsByTagName("details"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].setAttribute("open", "true"); 
} 
</script> 

les œuvres ci-dessous pour la première balise <details> mais je suppose que ma boucle dans ce qui précède n'est pas correct ...

<script> 
function openAll() { 
    document.getElementsByTagName("details")[0].setAttribute("open", "true"); 
} 
</script> 

le dessous est le code html factice que je teste sur

<details>Hello World<summary>summary</summary>lost</details> 
<details>another<summary>good night moon</summary>find me</details> 

Answer 1

MISE À JOUR

OP a demandé que les 6 premiers <detail> s exclus. Échangé la méthode .forEach() pour la boucle for.

Voir Snippet 2

---

Utilisez l'attribut .open de <details>. C'est vrai si ouvert faux si fermé. Détails commentés dans Snippet.

SNIPPET 1

// Reference the toggle link 
 
var xa = document.getElementById('expAll'); 
 

 
// Register link on click event 
 
xa.addEventListener('click', function(e) { 
 

 
    /* Toggle the two classes that represent "state" 
 
    || determined when link is clicked 
 
    */ 
 
    e.target.classList.toggle('exp'); 
 
    e.target.classList.toggle('col'); 
 

 
    // Collect all <details> into a NodeList 
 
    var details = document.querySelectorAll('details'); 
 

 
    /* Convert NodeList into an array then iterate 
 
    || throught it... 
 
    */ 
 
    Array.from(details).forEach(function(obj, idx) { 
 

 
    /* If the link has the class .exp... 
 
    || make each <detail>'s open attribute true 
 
    */ 
 
    if (e.target.classList.contains('exp')) { 
 
     obj.open = true; 
 
     // Otherwise make it false 
 
    } else { 
 
     obj.open = false; 
 
    } 
 

 
    }); 
 

 
}, false);

<a href='#/' id='expAll' class='exp'>Expand All</a> 
 

 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details>

SNIPPET 2

// Reference the toggle link 
 
var xa = document.getElementById('expAll'); 
 

 
// Register link on click event 
 
xa.addEventListener('click', function(e) { 
 

 
    /* Toggle the two classes that represent "state" 
 
    || determined when link is clicked 
 
    */ 
 
    e.target.classList.toggle('exp'); 
 
    e.target.classList.toggle('col'); 
 

 
    // Collect all <details> into a NodeList 
 
    var details = document.querySelectorAll('details'); 
 

 
    /* Convert NodeList into an array then iterate 
 
    || throught it... 
 
    */ 
 
    var D = Array.from(details); 
 

 
    /* Start a for loop at 6 instead of 0 
 
    || Now 0 - 5 details are excluded 
 
    */ 
 
    for (let i = 6; i < D.length; i++) { 
 

 
    /* If the link has the class .exp... 
 
    || make each <detail>'s open attribute true 
 
    */ 
 
    if (e.target.classList.contains('exp')) { 
 
     D[i].open = true; 
 
     // Otherwise make it false 
 
    } else { 
 
     D[i].open = false; 
 
    } 
 

 
    } 
 

 
}, false);

<a href='#/' id='expAll' class='exp'>Expand All</a> 
 

 
<details>Hello World 
 
    <summary>summary 0</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon 1</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary 2</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon 3</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary 4</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon 5</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary 6</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details> 
 
<details>Hello World 
 
    <summary>summary</summary>lost</details> 
 
<details>another 
 
    <summary>good night moon</summary>find me</details>

Answer 2

La solution de zer00ne semble parfois fonctionner dans les navigateurs (Chrome/Firefox). Parfois, au deuxième clic, cela fonctionne. Parfois, le premier. Parfois pas du tout. Peut-être parce que la balise details n'est toujours pas entièrement prise en charge?

Je suis allé avec la solution ci-dessous ... a juste une extrémité absolue à 31 au lieu d'arrêter à la fin.

<button id="expand" onclick="openAll()">Expand All +</button> 

var elems = document.getElementsByTagName("details"); 

function openAll() { 
    for (var i = 4; i <= 31; i++){ 
    elems[i].setAttribute("open", "true"); 
    } 
    document.getElementById("expand").setAttribute("onClick", "javascript: closeAll();"); 
    document.getElementById("expand").innerHTML = "Collapse All -"; 
} 

function closeAll() { 
    for (var i = 4; i <= 31; i++){ 
    elems[i].removeAttribute("open"); 
    } 
    document.getElementById("expand").setAttribute("onClick", "javascript: openAll();"); 
    document.getElementById("expand").innerHTML = "Expand All +"; 
}