How to Implement jQuery Accordion in ASP.Net MVC

It is very straight forward to implement a jQuery accordion in ASP.Net MVC. If we need to implement any jQuery UI widgets in ASP.NET MVC there there is no need to do any extra work. This is a cool feature of ASP.Net MVC.



Let's see with one simple ASP.NET MVC 4 application.

• Step 1
  
  Create a blank ASP.NET MVC application.
  
• Step 2
  
  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 the jQuery and style sheet as in 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 have not done any extra work to implement this functionality so ASP.NET MVC is very convenient with the jQuery UI Library. This is one of the good features of ASP.NET MVC.