Chandradev's Blog

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

Lets check with one simple  asp.net MVC 4  application.

Step1: Create one blank asp.net 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 () {
        $("#accordion").accordion();
    });
</script>

<div class="demo">
<div id="accordion">
  <h3>This is the Title1</h3>
  <div>
    <p>
    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.
    </p>
  </div>
  <h3>This is the Title2</h3>
  <div>
    <p>
    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.
    </p>
  </div>
  
</div>

</div>

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