Core idea: A control doesn’t generally need to know anything about its host elements — the elements it sits within. Neither does a control depend on other elements previously added to the DOM. The control itself normally provides all the elements it needs to function, as well as basic styling. Additionally, most controls generally impose few or no restrictions on the type of content they can hold.

When a control instance is created, a DOM element is created to serve as the top, or root, of the control’s elements. This top element is usually a div, although a control class can ask for a different top element. The control class and its parent classes may then populate this element with any other elements they require. The control’s subtree of elements is returned as the result of the create() call. You can then add the subtree to the document via a jQuery call like append(), or do anything else to it.

Controls are normally defined such that they can be added anywhere without breaking or otherwise affecting other aspects of the page. This makes it very easy to nest a control inside of another control, which in turn makes it easy to quickly refactor a user interface.

The demo code creates two adjacent controls: 1) a CollapsibleWithHeadingButton panel that can be toggled between a collapsed and an expanded state, and 2) one showing a random photo from Flickr’s Interestingness collection. (In its initial state, the photo sits outside the collapsible region, so the collapsible region doesn’t appear to do much.) Each control adds all the elements it needs to the DOM. These controls could be added anywhere on any page and, in principle, the controls would not need to be modified for the new situation.

Your goal: Move the call that creates the photo so that it sits inside the content of the collapsible control, instead of sitting just below it. (After moving it, be sure no dangling comma remains after the CollapsibleWithHeadingButton sequence.) You will then be able to collapse or expand the section containing the photo.

If you’re curious, you can further test the proposition that controls are generally context-independent by swapping the heading and content values, so that the photo ends up in the heading.