Structuring the accordion widget
Let's take a moment to familiarize ourselves with the underlying markup that an accordion is made of. Within the outer container is a series of links. These links are the headings within the accordion and each heading will have a corresponding content panel that opens when the header is clicked.
It's worth remembering that only one content panel can be open at a time when using the accordion widget. In a blank page in your text editor, create the following page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css"> <script src="js/jquery-2.0.3.js"></script> <script src="development-bundle/ui/jquery.ui.core.js"></script> <script src="development-bundle/ui/jquery.ui.widget.js"> </script> <script src="development-bundle/ui/jquery.ui.accordion.js"> </script...
