We can create an accordion menu using jQuery and jQuery-UI.
Here is an example of an accordion menu. Each tab has a heading. We can expand and collapse the slide panel by clicking the heading name.
Let's take a look at the script to see how this was done.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
$( "#accordion" ).accordion();
The first thing we need to do is create a
<div>, and give it an id. We gave this the id accordion.
Next, we need to create the headings. The headings should be nested in a
The corresponding panels content should also be contained in a
Here we have three headings and three panels. You can have as many as you need.
If you look at the
<head> tag. You will notice that we have included the jQuery source file, in addition to the jQuery-UI file.
We have also included a default CSS theme from the jQuery website. The theme is called smoothness, and contains some common css rules that are applied to user interfaces.
If you decide not to include the theme, your script will work, but will not include any styling. In this case you will need to create your own style sheet.
After the style sheet we have our script.
The script contains the accordion method, which is applied to the accordion
<div>. In order for this method to work, the jquery-ui.js file must be included in the