Views->Shared->_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Mvc Collapsible Webgrid</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>


Controllers->HomeController.cs:

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

namespace MvcCollapsibleWebgrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
List<Hotels> allOrder = new List<Hotels>();

var Restorent = new List<Hotels.Restaurants>();
var menus = new List<Hotels.RestaurantsMenu>();
//First Hotel and Menus
menus.Add(new Hotels.RestaurantsMenu { MenuId = 1, ItemName = "Menu1", Price = "10"});
menus.Add(new Hotels.RestaurantsMenu { MenuId = 2, ItemName = "Menu2", Price = "11"});
menus.Add(new Hotels.RestaurantsMenu { MenuId = 3, ItemName = "Menu3", Price = "12"});
menus.Add(new Hotels.RestaurantsMenu { MenuId = 4, ItemName = "Menu4", Price = "13"});
Restorent.Add(new Hotels.Restaurants { Rid = 1, _restaurantsmenu = menus, Location = "Mumbai", RestaurantsName = "Hotel 1", Rating = "7 Star" });

//Second Hotel and menus
var menus1 = new List<Hotels.RestaurantsMenu>();
menus1.Add(new Hotels.RestaurantsMenu { MenuId = 1, ItemName = "Menu5", Price = "14", Rid = "01" });
menus1.Add(new Hotels.RestaurantsMenu { MenuId = 2, ItemName = "Menu6", Price = "15", Rid = "02" });
menus1.Add(new Hotels.RestaurantsMenu { MenuId = 3, ItemName = "Menu7", Price = "16", Rid = "03" });
menus1.Add(new Hotels.RestaurantsMenu { MenuId = 4, ItemName = "Menu8", Price = "17", Rid = "04" });
Restorent.Add(new Hotels.Restaurants { Rid = 2, _restaurantsmenu = menus1, Location = "Pune", RestaurantsName = "Hotel 2", Rating = "5 Star" });


//Third Hotel and menus
var menus2 = new List<Hotels.RestaurantsMenu>();
menus2.Add(new Hotels.RestaurantsMenu { MenuId = 1, ItemName = "Menu9", Price = "18"});
menus2.Add(new Hotels.RestaurantsMenu { MenuId = 2, ItemName = "Menu10", Price = "19" });
menus2.Add(new Hotels.RestaurantsMenu { MenuId = 3, ItemName = "Menu11", Price = "20" });
menus2.Add(new Hotels.RestaurantsMenu { MenuId = 4, ItemName = "Menu12", Price = "21"});
Restorent.Add(new Hotels.Restaurants { Rid = 3, _restaurantsmenu = menus2, Location = "Mumbai", RestaurantsName = "Hotel 3", Rating = "7 Star" });
return View(Restorent);
}
public ActionResult About()
{
return View();
}
}
}

In Models:

Models->Hotels.cs

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

namespace MvcCollapsibleWebgrid.Models
{
public class Hotels
{
public IEnumerable<Restaurants> _restaurants { get; set; }
public List<RestaurantsMenu> _restaurantsmenu { get; set; }
public class Restaurants
{
public int Rid { get; set; }
public string RestaurantsName { get; set; }
public string Location { get; set; }
public string Rating { get; set; }

public List<RestaurantsMenu> _restaurantsmenu { get; set; }
}
public class RestaurantsMenu
{
public int MenuId { get; set; }
public string ItemName { get; set; }
public string Price { get; set; }
public string Rid { get; set; }
}
}
}


Views->Home->Index.cshtml

@model IEnumerable<MvcCollapsibleWebgrid.Models.Hotels.Restaurants>
@{
ViewBag.Title = "Hotel Details";
WebGrid grid = new WebGrid(source: Model, canSort: false, canPage: true);
}
<style type="text/css">
th, td
{
padding: 5px;
}
th
{
background-color: rgb(248, 248, 248);
}
#gridT, #gridT tr
{
border: 1px solid #0D857B;
}
#subT, #subT tr
{
border: 1px solid #f3f3f3;
}
#subT
{
margin: 0px 0px 0px 10px;
padding: 5px;
width: 95%;
}
#subT th
{
font-size: 12px;
}
.hoverEff
{
cursor: pointer;
}
.hoverEff:hover
{
background-color: rgb(248, 242, 242);
}
.expand
{
background-image: url(/Content/themes/base/images/pm.png);
background-position: -22px;
background-repeat: no-repeat;
}
.collapse
{
background-image: url(/Content/themes/base/images/pm.png);
background-position: -2px;
background-repeat: no-repeat;
}
</style>
<div id="main" style="padding: 25px; background-color: white;">
@grid.GetHtml(
htmlAttributes: new { id = "gridT", width = "700px" },
columns: grid.Columns(
grid.Column("Rid", "Rid"),
grid.Column("RestaurantsName", "RestaurantsName"),
grid.Column("Location", "Location"),
grid.Column("Rating", "Rating"),
grid.Column("_restaurantsmenu", format: (item) =>
{
;
WebGrid subGrid = new WebGrid(source: item._restaurantsmenu);
return subGrid.GetHtml(
htmlAttributes: new { id = "subT" },
columns: subGrid.Columns(
subGrid.Column("MenuId", "MenuId"),
subGrid.Column("ItemName", "ItemName"),
subGrid.Column("Price", "Price"),
subGrid.Column("Rid", "Rid"))
);
})))

</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var size = $("#main #gridT > thead > tr >th").size();
$("#main #gridT > thead > tr >th").last().remove();
$("#main #gridT > thead > tr").prepend("<th></th>");
$("#main #gridT > tbody > tr").each(function (i, el) {
$(this).prepend(
$("<td></td>")
.addClass("expand")
.addClass("hoverEff")
.attr('title', "click for show/hide")
);
var table = $("table", this).parent().html();

$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
$(".hoverEff", this).live("click", function () {
$(this).parent().closest("tr").next().slideToggle(100);
$(this).toggleClass("expand collapse");
});
});

$("#main #gridT > tbody > tr td.expand").each(function (i, el) {
$(this).toggleClass("expand collapse");
$(this).parent().closest("tr").next().slideToggle(100);
});

});
</script>


download  pm.png image and add into image folder:

Content->themes->base->images





========================================================================