December 18, 2014 10:14 by
Peter
At this moment, I am going to explain about create jQuery Accordion in ASP.NET MVC 5. This is very simple and easy to develop 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.
And this is the example with ASP.NET MVC 5 Apps:
1. Create a blank ASP.NET MVC application.
2. Download the jQuery and jQuery UI libray fron Nuget Package Manager in the apps.
3. Create the Home Controller with this code:
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();
}
}
}
4. Make 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>
This is sample text
</p>
</div>
<h3>This is the Title2</h3>
<div>
<p>
This is sample text
</p>
</div>
</div>
</div>