title: Automatically close all the other <details> tags after opening a specific <details> tag
body: <p>Here is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;details&gt;
    &lt;summary&gt;1&lt;/summary&gt;
    Demo 1
  &lt;/details&gt;
  
  &lt;details&gt;
    &lt;summary&gt;2&lt;/summary&gt;
    Demo 2
  &lt;/details&gt;
  
  &lt;details&gt;
    &lt;summary&gt;3&lt;/summary&gt;
    Demo 3
  &lt;/details&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want to do is -- if the details of any single <code>&lt;details&gt;</code> tag is open and I open/view another <code>&lt;details&gt;</code> tag, then the earlier one should close/hide/minimize. </p>
  
  <p>How can this be achieved?</p>
  
  <p>I'm aware the <code>&lt;details&gt;</code> tag is not supported in IE or Edge.</p>