Using JQuery Accordion Control and Tab Control in MVC

Step 1: Create The Blank MVC application.

Step 2: Install JQuery UI package in package manager console.

Or Follow below link.

Step 3: Add below css and links in your page:

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

Step 4: For Tab you have to add below code in script section:

$(function () {
$("#tabs").tabs();
});
#tabs is the div in your code

Step 5: For accordion you have to add below code in script section,

$(function () {
$("#accordion").accordion();
});
#accordion is div in your code

Hence your script section becomes,

<script>
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#accordion").accordion();
});
</script>

Step 6: Your tab code is as below:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Charecter 'A'</a></li>
<li><a href="#tabs-2">Charecter 'B'</a></li>
<li><a href="#tabs-3">Charecter 'C'</a></li>
</ul>
<div id="tabs-1">
<p>
<ul>
<li>Apple</li>
<li>Ant</li>
<li>Aeroplane</li>
</ul>
<p>
</div>
<div id="tabs-2">
<p>
<ul>
<li>Bat</li>
<li>Ball</li>
<li>Bus</li>
</ul>
</p>
</div>
<div id="tabs-3">
<p>
<ul>
<li>Cat</li>
<li>Cow</li>
<li>Cup</li>
</ul>
<p>
</div>
</div>

Your accordion code is as below:

<div id="accordion">
<h3>Charecter 'A'</h3>
<div>
<p>
<ul>
<li>Apple</li>
<li>Ant</li>
<li>Aeroplane</li>
</ul>
</p>
</div>
<h3>Charecter 'B'</h3>
<div>
<p>
<ul>
<li>Bat</li>
<li>Ball</li>
<li>Bus</li>
</ul>
</p>
</div>
<h3>Charecter 'C'</h3>
<div>
<p>
<ul>
<li>Cat</li>
<li>Cow</li>
<li>Cup</li>
</ul>
</p>
</div>
</div>

Step 7: Finally run your project you will find your page is as below: