How to implement jquery accordion in MVC


It is very straight forward to implement jquery accordion in MVC. If we have to implement any jquery UI widgets in mvc  there will be no need to do any extra work. This is the cool features of MVC.

Lets check with one simple MVC 4  application.

Step1: Create one blank mvc  application.

Step2: Download the Jquery and Jquery UI libray fron Nuget Package Manager in the application.

Step 3: Create the Home controller  like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication8.Controllers
    public class HomeController : Controller
        // GET: /Home/

        public ActionResult Index()
            return View();


Step 4: Create the Index view and implement Jquery and style sheet like this Code snippet

    ViewBag.Title = "Index";

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.2.min.js"></script>
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<link href="~/Content/themes/base/accordion.css" rel="stylesheet" />
<link href="~/Content/demos.css" rel="stylesheet" />

<script type="text/javascript">
    $(function () {

<div class="demo">
<div id="accordion">
  <h3>This is the Title1</h3>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
  <h3>This is the Title2</h3>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.


Summary: Here i donot have done any exatra work to implement this functionality so MVC is very user friedly with Jquery UI Library. This is one of the good features of MVC.


2 thoughts on “How to implement jquery accordion in MVC

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.