CSS focus: Is there a way to unfocus?

Question

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.

I tried this with no luck:

div.inside:active + li.collapse:focus { display: none;}

Does anyone know another way around this or is it even possible without JavaScript?

Here is the code and fiddle:

html:

<li class=collapse tabindex="1"><a>&nbsp;Click To See List&nbsp;</a> <div class="inside">
List 1....</div></li>

css:

li.collapse > a{background: #cdf; cursor: pointer; display: block;}
li.collapse:focus{ outline: none;}
li.collapse > 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;}

https://jsfiddle.net/q2e1vnny/

Answer 1

There is a trick i just found and i think you can do, just set:

li.collapse:focus
{ pointer-events: none; }

And make sure there is an object under your li which can be focused.

Some adjusments may be required depending on your situation.

Answer 2

You will need to use JavaScript to programmatically focus and blur elements. CSS will only allow you to style elements that have had an event occur on them.

Try:

document.getElementById('SomeId').focus();
document.getElementById('SomeId').blur();