12m 3m toggle btns

by karin

HTML

<div class="toggle-btn-holder">
    <a id="btn3m" class="btn">3m</a>
    <a id="btn12m" class="btn">12m</a>
     
</div>
<table>
    <thead>
        <tr><th>heading1-3</th><th>heading2-12</th><th>heading3-3</th><th>heading4-12</th></tr>
        <tr><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
        <tr><td>data3</td><td>sample data12</td><td>sample3</td><td>data12</td></tr>
        <tr><td>data3</td><td>sample data12</td><td>sample data3</td><td>sample12</td></tr>
        <tr><td>sample data3</td><td>sample12</td><td>data3</td><td>sample data12</td></tr>
        <tr><td>sample3</td><td>sample data12</td><td>data3</td><td>sample12</td></tr>
    </tbody>
</table>

CSS

.btn {
  display: inline-block;
  margin-bottom: 0;
  margin-right:2px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none; 
  border: 1px solid #ddd;
  color:#4f81bd;
  white-space: nowrap;
    padding:2px 12px;
    font-size:14px;
    line-height:1.5;
    border-radius: 4px;
    background:#efefef;
    /*width:2.7em;*/
  }

.btn:hover,
.btn:focus {
    color: #333;
    text-decoration: none;
    border: 1px solid #CFCFCF;
}  

  .btn.disabled,
  .btn.disabled:hover,   
  .btn[disabled],
  .btn[disabled]:hover{
    cursor: default;
    border: 1px solid #CFCFCF;
  }
  .btn:active,
  .btn.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);  
  }
  /*BTN PRESSED*/

  .btn-pressed {
  display: inline-block;
  margin-bottom: 0;
  margin-right:2px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: default;
  background-image: none; 
  border: 1px solid #ddd;
  color:#999;
  white-space: nowrap;
    padding:2px 12px;
    font-size:14px;
    line-height:1.5;
    border-radius: 4px;
    background:rgba(0,0,0,.125);
    /*width:2.7em;*/
  }

.btn-pressed:hover,
.btn-pressed:focus {
    color:#999;
    text-decoration: none;
    /*border: 1px solid #222;*/
}  

  .btn-pressed.disabled,
  .btn-pressed.disabled:hover,   
  .btn-pressed[disabled],
  .btn-pressed[disabled]:hover{
    cursor: default;
    border: 1px solid #CFCFCF;
  }
  .btn-pressed:active,
  .btn-pressed.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);  
  }
table{
    background:slategray;
    margin:10px;
    color:white;
    line-height:1.8;

}
table tr th{
    background:#222;
}
table tr th, table tr td{
    border:thin solid #eee;   
}
.add{background:red;}
.threeM{background:red;}
.threeM:after{
    content:"==3 Months==";
}
.twelveM{background:red;}
.twelveM:after{
    content:"==12 Months==";
}

JavaScript

var table3m=$("table thead tr th:first-child,table tbody tr td:first-child,table thead tr th:nth-child(3),table tbody tr td:nth-child(3)");

var table12m=$("table thead tr th:nth-child(2),table tbody tr td:nth-child(2),table thead tr th:nth-child(4),table tbody tr td:nth-child(4)");



    var btn3m = $("#btn3m");
    var btn12m = $("#btn12m");

    var btn1 = $(".toggle-btn-holder a:first-child");
    var btn2 = $(".toggle-btn-holder a:nth-child(2)");  

    btn1.addClass("btn");
    btn2.addClass("btn-pressed");
    btn2.attr("disabled", "disabled");

    var btn2isDisabled = btn2.is('[disabled]');
    var btn1isDisabled = btn1.is('[disabled]');
   var lableHolder=$("table thead tr:nth-child(2) th");
if(lableHolder.hasClass("twelveM")==false){
    lableHolder.addClass("twelveM");
}

    btn3m.click(function () {
        if (btn1isDisabled) { }
        else {
            btn1.removeClass("btn");
            btn1.addClass("btn-pressed");
            btn2.removeClass("btn-pressed");
            btn2.addClass("btn");
            btn2.attr("disabled", false);
            btn1.attr("disabled", true);
            btn1isDisabled = true;
            btn2isDisabled = false;
            table12m.hide();
            table3m.show();
            lableHolder.removeClass("twelveM");
            lableHolder.addClass("threeM");
        }

    });
    btn12m.click(function () {
        if (btn2isDisabled) { }
        else {
            btn2.removeClass("btn");
            btn2.addClass("btn-pressed");
            btn1.removeClass("btn-pressed");
            btn1.addClass("btn");
            btn2.attr("disabled", true);
            btn1.attr("disabled", false);
            btn2isDisabled = true;
            btn1isDisabled = false;
            table3m.hide();
            table12m.show();
            lableHolder.removeClass("threeM");
            lableHolder.addClass("twelveM");        
        }
      
    });