Creating expandable and collapsible boxes (accordion)
Accordions are good examples of widgets where more information can be displayed in less space in an interactive and attractive manner. This recipe will teach you to create a simple accordion using jQuery.
Getting ready
Create a folder named Recipe3 inside the Chapter6 directory.
How to do it...
Create a new file inside the
Recipe3folder and name it asindex.html.Now define the HTML markup for the accordion. The accordion will be a collection of
divelements each having anh1tag for the section title and a DIV for that section's content. Put some title for each section and also some content for it. Also define some CSS styles in theheadsection that will give the accordion a nice look and feel.<html> <head> <title>Accordion</title> <style type="text/css"> body{ margin:50px auto;font-family:"trebuchet MS",Arial;font-size:14px;width:500px;} div{ border:1px solid #FA6766;width:500px...
