Saving the <details> tag open after applying closeAll after I click on the content in the tag

Question

I used the tags <details>and <summary>to create a collapsible menu with buttons for opening certain elements on the page, but when I press the button, it closes a collapsed menu. How can I keep this minimized menu open after clicking a button in this menu?

I used onclick="closeAll()"to close the entire menu during its opening, but just need to save the open menu, after which I press the button in this menu (to show the users from which they navigated).

Here is part of my code:

<details onclick="closeAll()">
  <summary>
    <div class="menubut" id="butmotors"><img src="gfx/menu_motors.png" /></div>
  </summary>
  <input type="button" value="Your Garage" class="sub_but" onclick="your_garage();"><br />
  <input type="button" value="Travel By Car" class="sub_but" onclick="travel();"><br />
  <input type="button" value="Car Dealership" class="sub_but" onclick="car_dealership();"><br />
  <input type="button" value="Street Race" class="sub_but" onclick="street_racer();"><br />
  <input type="button" value="Gas Station" class="sub_but" onclick="show_gas_station();">
</details>';

function closeAll() {
  var i, a = document.getElementsByTagName('details');
  for (i in a) {
    a[i].open = '';
  }
}

Answer 1

, , .

, , ( ) , , , , - jQuery .stopPropagation().

...

( ) , sub_but . , switch(), , .

details. . / ... , false "" (true, , ... ).

// The arrow click handler
$("details").on("click",function(){
  console.log("You clicked on the detail arrow");
  
  // Close all other details tags.
  $("details").each(function(){
    this.open = false;
  });
});

// The button click handler
$(".sub_but").on("click",function(event){

  // To top the event from bubbling up
  event.stopPropagation();
  
  // Evaluate which button was clicked
  switch(this.value){
    case "Your Garage":
      console.log("You clicked Your Garage");
      // Do something specific here...
      break;
    
    case "Travel By Car":
      console.log("You clicked Travel By Car");
      // Do something specific here...
      break;
    
    case "Car Dealership":
      console.log("You clicked Car Dealership");
      // Do something specific here...
      break;
    
    case "Street Race":
      console.log("You clicked Street Race");
      // Do something specific here...
      break;
    
    case "Gas Station":
      console.log("You clicked Gas Station");
      // Do something specific here...
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<details>
  <summary>
    <div class="menubut" id="butmotors"><img src="gfx/menu_motors.png" /></div>
  </summary>
  <input type="button" value="Your Garage" class="sub_but"><br />
  <input type="button" value="Travel By Car" class="sub_but"><br />
  <input type="button" value="Car Dealership" class="sub_but"><br />
  <input type="button" value="Street Race" class="sub_but"><br />
  <input type="button" value="Gas Station" class="sub_but">
</details>

<details>
  <summary>
    Some other details...
  </summary>
  What could be interesting to know?
</details>

- ...

Answer 2

, , Louys Patrice Bessette , !

    // The arrow click handler
$("details").on("click",function(){
  //console.log("You clicked on the detail arrow");

  // Close all other details tags.
  $("details").each(function(){
    this.open = false;
  });
});

// The button click handler
$(".sub_but").on("click",function(event){

  // To top the event from bubbling up
  event.stopPropagation();

});