Q:

How to handle elements on top of a clickable area

I've built an accordion style control, and am trying to make it as accessible and semantic as I can. I've got it working fine now, but one aspect of it I'm not quite sure about. Feels kind of dirty for some reason. Not really sure if it is dirty or not.
Demo: http://jsfiddle.net/MygBf/
In my accordion panels, the entire top bar (header) is clickable. And, I have some keyword boxes, to the right of each top bar. The way I achieved these keywords boxes, was absolutely positioning them (which puts them on top of the link). This had the ill effect of creating dead spaces where you could not click on the bar anymore. To get around this, I just gave the keyword boxes an onclick (the same onclick the link has). This all works, but like I said, feels hacky/dirty.
Finally, the question:
Is it hacky/dirty? If so, any ideas for another way to achieve the keyword boxes up there, but not create dead spaces in the clickable area?

A:

It's not exactly what you are looking for, but I would have changed the selector to the entire header element, rather than individually selecting children.  Doing so gets you the effect you are looking for:
$expandos.on('click', 'header', function(event){

Demo: http://jsfiddle.net/Rm2Vn/

