title: Jquery How to like switch to next tab in ASP MVC5
body: <p>I have a view like this</p>
  
  <p>View Code:-</p>
  
  <pre><code>&lt;div class="col-md-3" style="background-color:white" id="Tabs"&gt;
      &lt;ul class="nav nav-tabs tabs-left"&gt;
          &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="col-md-9 tabs-left" style="background-color:white"&gt;
      &lt;div class="tab-content"&gt;
          &lt;div id="home" class="tab-pane fade in active"&gt;
              &lt;div class="panel-body fixed-panel"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-3"&gt;
                          @Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"})
                      &lt;/div&gt;
                      &lt;a href="#" class="btn btn-default pull-right nexttab"&gt;Continue&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="menu1" class="tab-pane fade in active"&gt;
              &lt;div class="panel-body fixed-panel"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-3"&gt;
                                      @Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"})
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="menu2" class="tab-pane fade in active"&gt;
              &lt;div class="panel-body fixed-panel"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-3"&gt;
                                       @Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"})
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>"</p>
  
  <p>Jquery To check for validation and close the tab and open the next tab:-</p>
  
  <pre><code>    $('.nexttab').click(function (e) {
  
          e.preventDefault();
           var sectionValid = true;
           section = $(this).closest('.tab-pane.fade');
           $.each(section.find('input'), function () {
              if (!$(this).valid()) {
                  sectionValid = false;
              }
          });
  
          if (sectionValid) {
              // collapse current section:
              section.collapse('toggle');
              // find and uncollapse next section:
              section.next().find('.tab-pane.fade').collapse('toggle');
          }
      });
  </code></pre>
  
  <p>I have go to close the active tab by "section.collapse('toggle');" however not able to open the next on on clicking the next tab. Any help will be highly appreciated. I am still trying my hands at asp mvc,so i could have missed the obvious.</p>