CSS focus: Is there a way to unfocus?
<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>