jQuery Tabs Collapse Control Using jQuery In Asp.Net MVC, MVC2, MVC3, MVC4 and MVC5

This article will show you how you can create a collapsible tab control un asp.net mvc using jQuery and jQuery UI. This article can be used in MVC, MVC2, MVC3, MVC4 and MVC5.

Some of my previous articles are as follows: Auto Scroll While Dragging Item Using jQuery In Asp.Net MVC, jQuery DatePicker Calendar With Clip Effect on TextBox Click In Asp.Net, jQuery DatePicker Calendar With Drop Effect on TextBox Click In Asp.Net, How to Create Tab Control Using jQuery In Asp.Net, jQuery Datepicker Calendar With Fold Effect Using jQuery In Asp.Net, jQuery Datepicker Calendar With Bounce Effect Using jQuery In Asp.Net, Drag and Drop UL, LI Item Top and Botton Using jQuery In Asp.Net, User Registration Form With ToolTip Message and Validation Using jQuery, C#.Net in Asp..Net.

So for this article first I have create a new asp.net mvc application. After creating the application we will create the view and add the jquery library.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

After this we will add the code the view. This is the complete code.

@{     ViewBag.Title = "jQuery Tabs Collapse Control Using jQuery In Asp.Net MVC"; } <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script language="javascript">     $(function () {         $("#tabs").tabs({             collapsible: true         });     }); </script> <style>     .tabSize     {         font-size: 12px;     } </style> <div id="tabs" class="tabSize">     <ul>         <li><a href="#tabs-1">Tab 1</a></li>         <li><a href="#tabs-2">Tab 2</a></li>         <li><a href="#tabs-3">Tab 3</a></li>         <li><a href="#tabs-4">Tab 4</a></li>     </ul>     <div id="tabs-1">         <p>             <strong>Click this tab again to close the content pane.</strong></p>         <p>             This is tab 1.This is tab 1.This is tab 1.This is tab 1.This is tab 1.This is tab             1.This is tab 1.This is tab 1.This is tab 1. This is tab 1.This is tab 1.This is             tab 1.This is tab 1.This is tab 1.This is tab 1.This is tab 1.This is tab 1.This             is tab 1. This is tab 1.This is tab 1.This is tab 1.This is tab 1.This is tab 1.This             is tab 1.This is tab 1.This is tab 1.This is tab 1.</p>     </div>     <div id="tabs-2">         <p>             <strong>Click this tab again to close the content pane.</strong></p>         <p>             This is tab 2.This is tab 2.This is tab 2.This is tab 2.This is tab 2.This is tab             2.This is tab 2.This is tab 2.This is tab 2. This is tab 2.This is tab 2.This is             tab 2.This is tab 2.This is tab 2.This is tab 2.This is tab 2.This is tab 2.This             is tab 2. This is tab 2.This is tab 2.This is tab 2.This is tab 2.This is tab 2.This             is tab 2.This is tab 2.This is tab 2.This is tab 2.</p>     </div>     <div id="tabs-3">         <p>             <strong>Click this tab again to close the content pane.</strong></p>         <p>             This is tab 3.This is tab 3.This is tab 3.This is tab 3.This is tab 3.This is tab             3.This is tab 3.This is tab 3.This is tab 3.This is tab 3. This is tab 3.This is             tab 3.This is tab 3.This is tab 3.This is tab 3.This is tab 3.This is tab 3.This             is tab 3.This is tab 3.This is tab 3. This is tab 3.This is tab 3.This is tab 3.This             is tab 3.This is tab 3.This is tab 3.This is tab 3.This is tab 3.This is tab 3.This             is tab 3.</p>     </div>     <div id="tabs-4">         <p>             <strong>Click this tab again to close the content pane.</strong></p>         <p>             This is tab 4. This is tab 4. This is tab 4. This is tab 4. This is tab 4. This             is tab 4. This is tab 4. This is tab 4. This is tab 4. This is tab 4. This is tab             4. This is tab 4. This is tab 4. This is tab 4. This is tab 4. This is tab 4. This             is tab 4. This is tab 4. This is tab 4. This is tab 4. This is tab 4. This is tab             4. This is tab 4. This is tab 4. This is tab 4. This is tab 4. This is tab 4. This             is tab 4. This is tab 4. This is tab 4.</p>     </div> </div>

 In above code the please check the jquery function below shown

<script language="javascript">     $(function () {         $("#tabs").tabs({             collapsible: true         });     }); </script>

In above code I have set collapsible: true. This is used for creating the collapsible tab. Now we have dine run the application to check the output.

DOWNLOAD