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.
-
jquery-1.7.1.js
-
jquery.ui.core.js
-
jquery.ui.widget.js
-
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.
<div class="demo">
<div id="accordion">
<h3><a href="#">C-Sharpcorner Home</a></h3>
<div>
<p>This Section Enables you to access C-Sharpcorner Home Page.</p>
<a href="http://www.c-sharpcorner.com">Click Here</a>
</div>
<h3><a href="#">Forum</a></h3>
<div>
<p>This section allows you to access C-sharpcorner forum section.
</p>
<a href="http://www.c-sharpcorner.com/Forums/">Click Here For Forum</a>
</div>
<h3><a href="#">Latest 50</a></h3>
<div>
<p>This sections enables you to access c-sharpcorner currentactive posts.</p>
<a href="http://www/c-sharpcorner.com/forums/CurrentActivePosts.aspx">Latest 50</a>
</div>
<h3><a href="#">Sub-Sections</a></h3>
<div>
<p>This section enables you to access another links of c-sharpcorner</p>
<ul>
<li><a href="http://www.c-sharpcorner.com/Videos/">Videos</a></li>
<li><a href="http://www.c-sharpcorner.com/Downloads/" />Downloads</li>
<li><a href="http://www.c-sharpcorner.com/Blogs/">Blogs</a></li>
</ul>
</div>
</div>
</div>
In the above markup we create one main div and inside it we create our accordion div which contains some sections. To refer to the section on the top we only have given hyperlinks and below that sub div tags to display our contents.
Step 4:
It's done; we have created our accordion control for a MVC application. Now you can run your application and see the result like below.
![accordion.bmp]()
Conclusion
Using simple jquery UI we can create an effective design in our MVC application.