Let's put a sample page together that will make the most of the accordion widget and uses some of the options and methods that we've looked at so far in this chapter.
One thing we haven't looked at yet is dynamic content within an accordion's content panel. Although no native methods or options are exposed by the accordion API which relate directly to enabling this functionality, we can add this feature manually ourselves.
The following screenshot shows the finished widget:
In a new page in your text editor, create the following HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="development-bundle/themes/smoothness/ui.all.css"> <link rel="stylesheet" type="text/css" href="css/ajaxAccordion.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI AJAX Accordion...