Collapsible div added to another collapsible div inherits the events that are bound on the parent collapsible. Is there a way to stop that or am I doing something wrong.

 

Say for example I create a collapsible div and add another collapsible div to this div. Now if I bind collapse and expand events on the parent div  the events are also fired for actions on the child div.

 

See the jsfiddle example - http://jsfiddle.net/UQWFJ/58/

 

If I bind the expand and collapse on the parent the child also has these events and it causes problems. Is there are way to bind events only on the parent collapsible?

 

What I want to do is that when I expand the parent collapsible I want to fetch data and create the child collapsible and when I collapse the parent collapsible I want to remove all collapsibles within this parent. However these events are getting fired for all collapsibles not the parent.