We can create an accordion menu using J query and G query UI.
Here's an example of an accordion menu.
Each tab has a heading.
We can expand in collapse the slide panel by clicking the heading name.
Now let's take a look at the script to see how this was done.
The first thing we need to do is to create a div and give it an I.D. we gave this div the I.D. accordion
your entire menu will be contained within the open and close div tag assign this I.D..
Next we need to create the headings the headings should be nested in a div element.
You don't have to give these div elements the name the corresponding panel content should also be contained
in a div element.
So if we look at the first item heading one is contained within an open and closed div tag.
And same for paragraph 1 the same is true for the second and third menu item.
Here we have three headings and three panels but you can have as many as you need next.
If you look at the head tag
you'll notice that we have we've included the j j query source file in addition to the J query UI file.
We've also included a default see SS theme from the J query website.
The theme is called smoothness.
It contains some common CSX rules that are applied to UI interfaces if you decide not to include include
this theme your script will still work but it will not include any styling.
In this case you'll need to create your own style sheet and style rules after this style sheet.
We have our script the script contains the accordion method which is applied to the accordion do here
we can you can see we've referenced the div with I.D. accordion
in order for this method to work.
The J query UI dot J.S. file must be included in the head type.
So again you can see we start with the document ready function and then we just call in reference the
accordion method and we've applied that method to the accordion
and that's it that will produce a fairly neat menu
and just for the sake of this example if you wanted to add a fourth menu item you can simply copy and
paste our block of code
and when we refresh the page we'll see that it adds a fourth menu item.