jQuery : trying to draw elements that snap together and break apart

I'm trying to implement some kind of very basic flow chart functionality in a div. Basically I have some boxes which by default my be joined by a little AND bubble. If I click on the bubble it will change to an OR bubble which will result in the boxes (开发者_运维技巧divs) splitting.

Not really to sure where to start on this any guidance much appreciated - eg links to something similar or advice in what to look into. I've attached a mockup to help explain what I mean.

Thanks as always SO

W

It should be pretty straightforward. Bind a click on the and/or button, which changes the CSS class of the lower box to a class which has a larger margin-top property and moves the background-position of the and/or image to show OR. You could use jQuery's toggle function for this, though I imagine you'll be storing the state in a separate data structure anyway.