how to make a div "transparent" to events ?

Hi robboeradobe,

This is not an accordion (I have already used the jQuery UI accordion) : it's not visible on the screen shots, but the third block expands upward !

Thank you for the opacity trail. I could not imagine it had to do with events and I thought it as a purely visual property. I will try it.

Gil

I was not explicit enough while using the expression "transparent". In the following figure the doted parts correspond to the additional area of each symbol when it is in its expanded state.

The problem is : button 2 can't be hovered over, nor clicked, because the expanded part of block 1 prevents it from receiving the events.

Setting the opacity to 0 is not a solution, as block 1 would become invisible.

How to prevent block 1 from capturing the events ?

Gil

Hi robboeradobe,

i took a look at your file and fixed it using clipping.

Thank you. You  broke the deadlock

you could also probably fix it with the css3 z-index but that is a bit more complicated to do right.

Yes. The only idea I had was to reassign the three z-index values to modify the stacking order depending on the vertical position of the mouse cursor, which is indeed complicated

Nevertheless, I must refine your solution with z-index to get the block closing transition (as is it jumps from expanded to closed state). Thank you again.

Gil