title: Collapse/close a button only by clicking on it
body: <p>I'm trying to code a responsive button which can be placed multiple times in the same line, showing its content always below the line containing the button.</p>
  
  <p>In the snippet there is a working code, but it has a small flaw: since the pseudo-class <code>focus</code> is used, once the button is opened it's enough to click anywhere on the screen to close it.</p>
  
  <p>The usual behaviour for a button is that to close it you have to click on it, so is it possibile to get this behaviour also for this one?</p>
  
  <p>I used other pseudo-classes but without success, I guess only a javascript can do the job.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    position: relative;
    margin: 2em;
  }
  .details {
    display: none;
  }
  .collapsible:focus {
      margin-bottom: 1.5em;
      pointer-events: none;
  }
  .collapsible:focus + .details 
  {
    display: block;
    margin-top: -1.15em;
    position: absolute;
    left: 0;
    right: 0;
    background: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=container&gt;
  
  You can &lt;button class="collapsible"&gt;place&lt;/button&gt;&lt;span class=details&gt;yes&lt;/span&gt; more than &lt;button class="collapsible"&gt;one&lt;/button&gt;&lt;span class=details&gt;nice&lt;/span&gt; per line, they are responsive and the content is always shown just &lt;button class="collapsible"&gt;below&lt;/button&gt;&lt;span class=details&gt;cool&lt;/span&gt; the line containing the button.
  But once opened, you can close it with a click &lt;button class="collapsible"&gt;everywhere&lt;/button&gt;&lt;span class=details&gt;not good&lt;/span&gt; on the screen
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Javascript for further customization</h2>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var coll = document.getElementsByClassName("collapsible");
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.parentElement.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }
  &lt;/script&gt;
  </code></pre>