JQUERY WIDGETS TABS Requires core j Query library

JQUERY WIDGETS: TABS Requires core j. Query library + j. Query UI Examples: https: //jqueryui. com/tabs/ API: http: //api. jqueryui. com/tabs/

Click tabs to swap between content that is broken into logical sections.

collapsible • Click the currently selected tab again to toggle its content closed/open

QUICK INTERLUDE ABOUT WHAT AJAX IS Update a web page without reloading the page Request data from a server - after the page has loaded Receive data from a server - after the page has loaded Send data to a server - in the background ***Need to actually host files on a server to see this work

Populate Tab Content via AJAX Content and Markup can reside in an outside file. When tab clicked, loaded from that file into content pane.

Vertical Tabs – Script + CSS

CSS

Styling Tab Parts • Components of a tabs already have specific class names they use for styling • You can access individual components and apply usual style rules • Needs to be either internal style (in head) or external sheet linked in after the default one from Google Hosted Libraries so these rules win in a fight

Styling • . ui-tabs • Outer container of the tabs • Defaults to background image, which you may turn off if not wanted

Styling • . ui-tabs-nav • Section behind list of tabs • Default has background image – turn off to see background color • . ui-tabs-anchor • Tabs themselves • Default has background image – turn off to see background color • . ui-tabs-panel • Panel associated with active tab • Background cannot be set for this