Using JQuery Accordion Control and Tab Control in MVC

This blog is will help you how to use Accordion 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: