Expanding all details tags
Solution 1:
UPDATE
OP requested that the first 6 <detail>s be excluded. Swapped out .forEach() method for for loop.
See Snippet 2
Use the
.open attribute of <details>. It's true if open false if closed.
Details commented in 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>Solution 2:
The solutions didn't work for me. So, I altered @testing123 solution to get it to work with a complete example.
function openAll() {
var elems = document.getElementsByTagName("details");
document.getElementById("btnExpandHideAllDetails").innerHTML = "Hide All Details on page";
document.getElementById("btnExpandHideAllDetails").setAttribute( "onClick", "javascript: closeAll();");
for (var i = 4; i <= elems.length; i++){
elems[i].setAttribute("open", "true");
}
}
function closeAll() {
var elems = document.getElementsByTagName("details");
document.getElementById("btnExpandHideAllDetails").setAttribute( "onClick", "javascript: openAll();" );
document.getElementById("btnExpandHideAllDetails").innerHTML = "Expand All Details on Page";
for (var i = 4; i <= elems.length; i++){
elems[i].removeAttribute("open");
}
}<button id="btnExpandHideAllDetails" onclick="openAll()" style="color:white;background-color:green;">Expand All Details on Page</button>
<details>
<summary>0</summary>
</details>
<details>
<summary>1</summary>
</details>
<details>
<summary>2</summary>
</details>
<details>
<summary>3</summary>
</details>
<details>
<summary>Expand me.</summary>
Hello World!
</details>