Creating an accordion style menu

Accordions can also be used as a menu. The content part of an accordion can be used in many ways. In this recipe, we will create a simple accordion and will use it as a menu. Headers of the accordion reveal the content section. This content section will have some text and a Read More link. Clicking on this link will request the related content from a PHP script and will display it on the page.

It can be very handy in cases when you want to show the user only a summary of something (say a product) instead of lengthy details. If the user finds the summary interesting, he can click the link and can read the full details on the page. It can save a lot of space, which means more data can be displayed in the saved space.

Getting ready

Create a new folder under the Chapter7 directory and name it Recipe3.

How to do it...

1. Create a file named index.html inside the Recipe3 folder. Now we have to create a page with three sections. On the top will be a header that will have...