strange. i remember in a custom query a tag doesn't need to be an ' a ' tag to register the focus event.
make the following changes:
Move the <style>..</style> block to before the HTML
change:
__<!-- button - click -->
__<div class="qry1-btn_more-clk fa fa-search" title="More Info."></div>
...to:
__<!-- button - click -->
__<a href="#!" class="qry1-btn_more-clk" title="More Info.">
____<i class="fa fa-search"></i>
__</a>
- change: (in <style>..</style> block)
__.qry1-btn_more-hvr, .qry1-btn_more-clk { display: block; width: 30px; color: #337ab7; }
__.qry1-btn_more-clk { cursor: pointer; }
...to:
__.qry1-btn_more-hvr, .qry1-btn_more-clk { width: 30px; color: #337ab7; }
__.qry1-btn_more-clk { cursor: pointer; text-decoration: none; }
it works per:
https://www.w3schools.com/code/tryit.asp?filename=FEMF36NI4EMZ
(' # if ' commented out in above example as not compatible with that page)
.qry1-btn_more-hvr:hover + #qry1-panel_more-hvr { display: block; }
.qry1-btn_more-clk:focus ~ #qry1-panel_more-clk { display: block; }
.qry1-btn_more-clk:focus { pointer-events: none; } /* enables clicking button again to close panel */
"1) is the "~" in the 2nd line correct?"
Yes. ' ~ ' selects ALL subsequent tags which are at the same hierarchy level according to the scope subsequently specified.
Because there is only one tag at the same hierarchy level with the id, #qry1-panel_more-clk, it is the only one selected and affected.
If there were others with the same id (or class or tag type.. if these were instead used to define the scope) they too would be selected and affected by, { display: block; }.
Whereas the + selector selects only the tag immediately after at the same hierarchy level as long as it qualifies according to the scope.
"2) I don't understand the syntax on the FOCUS line and how that changes the display to block."
Focus.. as in the event onFocus, or hover/onHover, etc..
'focus' occurs when selected.
There is no 'click' or onClick or tap/onTap event in css.
A tag can receive focus if it is a link, ie. ' a ' tag with ' href= '.
However, I didn't make 'qry1-btn_more-clk' an ' a ' tag originally (it was just a ' div ') because usually in an Aware custom query the focus event registers without the element being an ' a ' tag.
Based on answers to 1 and 2, it should be possible to deduce how the below works:
.qry1-btn_more-clk:focus ~ #qry1-panel_more-clk { display: block; }
"3) I also don't understand how it knows to go back to NONE when you click it again."
'display: none;' ..is the default. so when the 'focus' event ends, it reverts to default.
the focus event ends by way of:
.qry1-btn_more-clk:focus { pointer-events: none; }
this says, when tags of class, 'qry1-btn_more-clk', have focus then do not accept mouse events on those tags.
so when you click the tag again it is like you are clicking somewhere else on the screen, NOT the same tag.
thus the tag will lose focus.. and the 'more info.' block will disappear because its 'display' property reverts to its default, which is 'display: none;'.
an unfortunate aspect of 'pointer-events: none;' is that it also overrides the 'cursor: pointer;' property, thus the finger pointing hand reverts to the default cursor when the tag has focus.
