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. });
  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. });
  5. #accordion is div in your code
Hence your script section becomes,
  1. <script>
  3. $(function () {
  4. $("#tabs").tabs();
  5. });
  7. $(function () {
  8. $("#accordion").accordion();
  9. });
  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>
  33. </div>
Step 7: Finally run your project you will find your page is as below:

run your project