JQuery Accordion For an ASP.NET MVC

Introduction:

In this article we will see how to create an accordion like an Ajax accordion using jquery in an ASP.NET MVC application. In my last article we saw how to create a calendar popup using jquery. In this article we will create an accordion to display our records in a view using jquery.

To do that first you need to download the jquery UI from here. We will use these scripts and CSS to create our accordion control. In the downloaded files we need not add all the scripts and all the CSS specific scripts; we need to add only one CSS to our application. So copy and paste the following given scripts and CSS to your application on the given directory.

1. jquery-1.7.1.js

2. jquery.ui.core.js

3. jquery.ui.widget.js

4. jquery.ui.accordion.js

Add all these scripts in the Scripts folder to your application and add the demo.css in root directory of your application.

After adding all the scripts and CSS files we can start our work now. So let's start it step-by-step given below.

Step 1:

Add a controller with an Index action and the same add the view for the Index action i.e. Index.aspx.

Step 2:

Now in <head>section</head> refer all the above scripts and CSS like below and having one more script which calls the accordion by taking the id of the control.

<link rel="stylesheet" href="../../Content/themes/base/jquery.ui.all.css">
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery.ui.core.js"></script>
<script src="../../Scripts/jquery.ui.widget.js"></script>
<script src="../../Scripts/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="../../demos.css">
<script>
$(function () {
$("#accordion").accordion({
collapsible: true
});
});
</script>

In the above lines of code we only referred our scripts and CSS with one script which takes the id of the control which we need to make as an accordion. We have given accordion as the id; now we have to create the div tag with the id having accordion.

Step 3:

Now we will create our div which will work as an accordion and which will contain our custom data or controls or whatever you need to display in it. In your body section paste the following code to create the accordion.