MacMan MacMan - 3 months ago 13
CSS Question

Tabbed Layout using JQuery & CSS

I'm using a simple tab layout to present a form and it seems to work well. But I've hit an issue were I want to use two forms not one.

Tabs 1,2 & 3 are one form and tab 4 is another. When the user hits submit (only one submit button) I can use JQuery to serialise the data from

form1
pass that to a php page and then serialise
form2
and pass that to a php page.

The issue I have is as soon as I move the closing
<\form>
tag from after the 3rd tab it messes the layout..

Clicking on tab one shows
tab 1
, clicking on tab 2 shows
tabs 2 & 4
, clicking on tab 3 shows
tab 3
and clicking on tab 4 shows nothing..

The JQuery used is this:

$(document).ready(function(){
$("ul#tabs li").click(function(e){
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active");
$("ul#tab li:nth-child("+nthChild+")").addClass("active");
}
});
});


and I've created a fiddle that shows the issue

Can any one advise how I can get this to work.

Thanks

Answer

Here is the updated code. Updated fiddle here

$(document).ready(function() {
  $("ul#tabs li").click(function(e) {
    // Remove active class from all li's
    $("ul#tabs li").removeClass("active");
    
    // Add active class to the clicked/selected li only
    $(this).addClass("active");
    
    // Get the index(position) of clicked li. Eg. if TAB1 is clicked this will return 0. if TAB4 is clicked this will return 3.
    var i = $(this).index();
    
    // Remove active class from all #tab(content)
    $("ul#tab li.active").removeClass("active");
    
    // Add the active class to #tab(content) at the position of clicked tab.
    $("ul#tab li").eq(i).addClass("active");
  });
});
ul#tabs {
  list-style-type: none;
  padding: 0;
  text-align: center;
}
ul#tabs li {
  display: inline-block;
  border-bottom: solid 1px #000;
  padding: 10px 20px;
  color: #000;
  cursor: pointer;
  font-size: 12px;
}
ul#tabs li.active {
  background-color: #000000;
  color: #ffffff;
}
ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0
}
ul#tab li {
  display: none;
  padding: 0 15px 0 15px;
  border: solid 1px #000;
  background-color: #bbbbbb;
}
ul#tab li.active {
  display: block;
  min-height: 150px;
}
ul#tab li h2 {
  color: #333333;
  font-weight: 400;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #000;
}
#wrapper {
  width: 850px;
  margin: 0 auto;
}
.container {
  width: 50%;
  margin: 0 auto;
  padding: 0 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <ul id="tabs">
    <li class="active">TAB1</li>
    <li>TAB2</li>
    <li>TAB3</li>
    <li>TAB4</li>
  </ul>

  <ul id="tab">
    <form id='form1'>

      <!-- first tab -->
      <li class="active">
        <h2>TAB1</h2>
      </li>
      <!-- first tab -->

      <!-- second tab -->
      <li>
        <h2>TAB2</h2>
      </li>
      <!-- second tab -->

      <!-- third tab -->
      <li>
        <h2>TAB3</h2>
      </li>
      <!-- third tab -->
    </form>

    <!-- fourth tab -->
    <li>
      <h2>TAB4</h2>
      <form id='form2'>

      </form>
    </li>
    <!-- fourth tab -->

    <div class='formFooter'>
      <div class='right'>
        <input type='button' class='save' id='save' value='Save' />
      </div>
    </div>
  </ul>
</div>