Post
Ask Question

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.

Install JQuery UI

Or Follow below link.

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

  1. <link href="~/Content/themes/base/all.css" rel="stylesheet" />  
  2. <script src="~/Scripts/jquery-1.10.2.js"></script>  
  3. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  4. <script src="~/Scripts/jquery-ui-1.11.4.js"></script>  
  5. <link href="~/Content/themes/base/accordion.css" rel="stylesheet" />  
Step 4: For Tab you have to add below code in script section:

  1. $(function () {  
  2.    $("#tabs").tabs();  
  3. });  
  4.  
  5. #tabs is the div in your code   
Step 5: For accordion you have to add below code in script section,
  1. $(function () {  
  2.    $("#accordion").accordion();  
  3. });  
  4.  
  5. #accordion is div in your code   
Hence your script section becomes,
  1. <script>  
  2.   
  3.     $(function () {  
  4.         $("#tabs").tabs();  
  5.     });  
  6.   
  7.     $(function () {  
  8.         $("#accordion").accordion();  
  9.     });  
  10.   
  11.  </script>  
Step 6: Your tab code is as below:
  1. <div id="tabs">  
  2.     <ul>  
  3.         <li><a href="#tabs-1">Charecter 'A'</a></li>  
  4.         <li><a href="#tabs-2">Charecter 'B'</a></li>  
  5.         <li><a href="#tabs-3">Charecter 'C'</a></li>  
  6.     </ul>  
  7.     <div id="tabs-1">  
  8.         <p>  
  9.             <ul>  
  10.                 <li>Apple</li>  
  11.                 <li>Ant</li>  
  12.                 <li>Aeroplane</li>  
  13.             </ul>  
  14.         <p>  
  15.     </div>  
  16.     <div id="tabs-2">  
  17.         <p>  
  18.             <ul>  
  19.                 <li>Bat</li>  
  20.                 <li>Ball</li>  
  21.                 <li>Bus</li>  
  22.             </ul>  
  23.         </p>  
  24.    </div>  
  25.     <div id="tabs-3">  
  26.         <p>  
  27.             <ul>  
  28.                 <li>Cat</li>  
  29.                 <li>Cow</li>  
  30.                 <li>Cup</li>  
  31.             </ul>  
  32.         <p>  
  33.    </div>  
  34. </div>  
Your accordion code is as below:
  1. <div id="accordion">  
  2.     <h3>Charecter 'A'</h3>  
  3.     <div>  
  4.         <p>  
  5.             <ul>  
  6.                 <li>Apple</li>  
  7.                 <li>Ant</li>  
  8.                 <li>Aeroplane</li>  
  9.             </ul>  
  10.         </p>  
  11.     </div>  
  12.     <h3>Charecter 'B'</h3>  
  13.     <div>  
  14.         <p>  
  15.             <ul>  
  16.                 <li>Bat</li>  
  17.                 <li>Ball</li>  
  18.                 <li>Bus</li>  
  19.             </ul>  
  20.        </p>  
  21.     </div>  
  22.     <h3>Charecter 'C'</h3>  
  23.     <div>  
  24.         <p>  
  25.             <ul>  
  26.                 <li>Cat</li>  
  27.                 <li>Cow</li>  
  28.                 <li>Cup</li>  
  29.             </ul>  
  30.         </p>  
  31.     </div>  
  32.   
  33. </div>  
Step 7: Finally run your project you will find your page is as below:

run your project