I am working on a menu using mobilyblocks which is working fine, but I want to add a collapsing and expanding effect the the menu on click. I have tried overlaying a div with a bakground image toggle which also works okay, but I can't get the two to work off the same click.
On the basis that a picture is worth a thousand words, I have set up a demo page at www.deslink.net/menu
to illustrate. You will see a large square div there with a green menu circle and a smaller square div in the centre (I have put borders on both divs to make them easier to see). The small one is the mobilyblocks div. I have also set the same up as JSFiddle at http://jsfiddle.net/joebloggs/VsMXm/3/
where the code is visible.
If you click on the large div (outside the smaller div) you will see the background toggle to a smaller green circle. If you click on the smaller div in the centre you will see the mobilyblocks animation. What I am trying to achieve is to click on the centre div and have the click fire the toggle and the animation at the same time. So the effect would be that the large circle "collapses" to the small one and the animation runs. Clicking again on the centre would toggle back to the large circle. I don't know whether I should be posting code here, but the code is all quite small and readily viewable by viewing the page source. If I should post it here I am happy to do that. Sorry - I'm not sure of the convention on the forum.