JavaScript Close all the <details>

[SpongeBOB]

Hi everyone,

When I expand one of the <details> I would like all the others to close automatically.

I've tried :

(in head of the html document within <script>)

// Fetch all the details element.
const details = document.querySelectorAll("details");

// Add the onclick listeners.
details.forEach((targetDetail) => {
  targetDetail.addEventListener("click", () => {
    // Close all the details that are not targetDetail.
    details.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.setAttribute("open",false);
      }
    });
  });
});

But that doesn't work..

Any ideas ?

Thanks.

 

[SpongeBOB]

Actually as I can modify quite easily all my <details>

It could be a javascript function, that close first all the <details> then open the one specified in the call of the function.

Thanks/

 

[SpongeBOB]

Done -->

   function CloseAllbut(x) {
      AllofThem = document.getElementsByTagName("details");
      for (let i = 0; i < AllofThem.length; i++) {
         AllofThem[i].open=false;
      }         
      document.getElementById(x).open=true
   }

Can't wait we can can interact with the DOM trough Pyton..

 

[OldMan]

Have you tried detail.setAttribute("close");??