Core idea: All control classes derive from jQuery. You can directly manipulate controls using the full power of jQuery, the most widely-used JavaScript library for web user interface development.

Control classes inherit from a base class called Control, which itself inherits from jQuery. To the normal jQuery feature set, Control adds functionality for creating and manipulating controls. New control classes created in the QuickUI framework are subclasses of the Control class, adding further specialization.

So when you have a reference to a control, you have a jQuery object as well. You can show and hide control instances with show() and hide(), you can manipulate a control’s CSS styling with css(), you can animate a control with animate(), and so on.

Like any jQuery object, the value of a control object is an array containing one or more DOM elements. In the case of a newly-created control, the array will contain a reference to single element: the element (usually a div) that serves as the root of the control’s DOM subtree, and which the control has populated with the sub-elements it needs.

The demo code creates a button and a photo. Because the button is a jQuery object, a click event handler can be attached to it which toggles display of the photo. Since the photo is also a jQuery object, it can be hidden and shown by applying jQuery’s toggle() function to it.

The demo code also adds a function to the control object that tests for membership of a class with a given name. This function is invoked several times to show that a ColorSwatchComboBox control is also an instance of some of its parent classes, but is not an instance of the BasicButton class.

Your goal: Change the click handler to use jQuery’s fadeToggle() function instead, which will animate the transition from visible to hidden. You can try adding a duration parameter to fadeToggle(), such as “fast”, “slow”, or a number in milliseconds.