JSFiddle - React, Tailwind, and code Playground

by Sherbrow

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
    <form class="form-horizontal" action='/products/add/' method='post'>
      <fieldset>
      <div class="tabbable">
        <ul class="nav nav-tabs" id="tab_bar">
          <li class="active"><a href="#tab1" data-toggle="tab">Product</a></li>
          <li><a href="#tab2" data-toggle="tab">Offer</a></li>
        </ul>
        
        <div class="tab-content">
          <!-- TAB 1 -->
          <div class="tab-pane active" id="tab1">
            <div class="control-group">
              <label class="control-label" for="id_title">Title</label>
                <div class="controls">
                  <input type="text" name="title">
                </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="id_manufacturer">Manufacturer</label>
                <div class="controls">
                  <input type="text" name="manufacturer">
                  <span class="help-inline">          
                </div>
            </div>  
           </div>
          
          <!-- TAB 2 -->
          <div class="tab-pane" id="tab2">
            <div class="control-group">
              <label class="control-label" for="id_condition">Condition</label>
                <div class="controls">
                  <input type="text" name="condition">
                </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="id_condition_note">Condition Note</label>
                <div class="controls">
                  <input type="text" name="condition_note">
                </div>
            </div>
          </div>            
        </div>
    <hr class="border-line"> <!-- STYLED IN FORMS.CSS -->
    <input class="submit" type=submit value="Add">
     ...

JavaScript

var $tabs = $('.tabbable li');

$('#prevtab').on('click', function() {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});

$('#nexttab').on('click', function() {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});