Using JavaScript to change css display properties for details element on toggle

I have two details element trees but there will be more than that in my project. I want to change the css display properties to none for every details element except the one I just opened. How can I do this? Thank you.

Here is my codepen testing area.

Here is the basic code:

var details1 = document.querySelector("details")

details1.addEventListener("toggle", function() {
  console.log('toggle');
  /*details1.firstChild.textContent = "done"
  I need something like:
  document.querySelector('#'+ details[i](but not the one we just toggled!)style.display = "none";*/
  
})

.details {
  display: in-line;
}

<p>
<details id="agriculture" class="details"><summary>Agriculture</summary>
                <details><summary>Picking & packing</summary></details>
                            <details><summary>Farm worker</summary></details>
                            <details><summary>Irrigationist</summary></details>
                            <details><summary>Tractor operator</summary></details>
                            <details><summary>Pig farmer</summary></details>
                            <details><summary>Station hand</summary></details>
            </details>

      <details id="construction" class="details"><summary>Construction</summary>
       <details><summary>Foreperson</summary></details>
                <details><summary>Plant and Machinery Operator</summary></details>
                                <details><summary>Concreter</summary></details>
                                <details><summary>Paver</summary></details>
                                <details><summary>Fencer</summary></details>
                                <details><summary>Surveyer</summary></details>
            </details>

</p>

edit:

I found a good example of how to use document.getElementsByClassName and I am trying it on my fork of the first codepen which is here.

That's makes them all vanish though. I need to either exlude the one I just toggled or then change it back display in-line again.

I also need to add an event listener to the toggle event for each details tree and this stackoverflow post looks like it help with that.

from Recent Questions - Stack Overflow https://ift.tt/2Ga95p2
https://ift.tt/eA8V8J