title: CSS focus: Is there a way to unfocus?
body: <p>I'm playing about with focus in my css as I am thinking of doing a drop down list with this. I am however having a problem with the "unfocus": at the moment it will unfocus if you click outside of the div.inside which is what I want. However, I also want to make it unfocus when you click again on the li.collapse, so that the li.collapse is like an on/off button.</p>
  
  <p>I tried this with no luck:</p>
  
  <pre><code>div.inside:active + li.collapse:focus { display: none;}
  </code></pre>
  
  <p>Does anyone know another way around this or is it even possible without JavaScript?</p>
  
  <p>Here is the code and fiddle:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;li class=collapse tabindex="1"&gt;&lt;a&gt;&amp;nbsp;Click To See List&amp;nbsp;&lt;/a&gt; &lt;div class="inside"&gt;
  List 1....&lt;/div&gt;&lt;/li&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>li.collapse &gt; a{background: #cdf; cursor: pointer; display: block;}
  li.collapse:focus{ outline: none;}
  li.collapse &gt; div.inside{ display: none;}
  li.collapse:focus div.inside{display: block; }
  div.inside:focus{ display: none;}
  div.inside{background: #cdf; }
  div.inside:active + li.collapse:focus { display: none;}
  </code></pre>
  
  <p><a href="https://jsfiddle.net/q2e1vnny/" rel="noreferrer">https://jsfiddle.net/q2e1vnny/</a></p>