title: Multiple checkbox options using the button divide into tabs
body: <p>Here is my updated code for index.php file.Now i think the problem is only in the tabs.Tabs are not showing properly.They are showing like a link.And i think the problem is only the naming convention now.</p>
  
  <p>Index.php     </p>
  
  <pre><code> &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Dashboards&lt;/title&gt;
      &lt;style&gt;
        body {
          padding: 5px;
        }
        margin : 5px;
      font: Verdana, Helvetica, Arial;
      padding: 0px;
      background: #fff;
  }
  
  body {
      margin : 10px;
      font: Verdana, Helvetica, Arial;
      padding: 0px;
      background: #fff;
  }
  
  #tab-links {
      border-bottom : 1px solid #ccc;
      margin : 0;
      padding-bottom : 19px;
      padding-left : 10px;
  }
  
  #tab-links ul, #tab-links li    {
      display : inline;
      list-style-type : none;
      margin : 0;
      padding : 0;
  }
  
  
  #tab-links a:link, #tab-links a:visited {
      background : #E8EBF0;
      border : 1px solid #ccc;
      color : #666;
      float : left;
      font-size : small;
      font-weight : normal;
      line-height : 14px;
      margin-right : 8px;
      padding : 2px 10px 2px 10px;
      text-decoration : none;
  }
  
  #tab-links a:link.active, #menu a:visited.active    {
      background : #fff;
      border-bottom : 1px solid #fff;
      color : #000;
  }
  
  #tab-links a:hover  {
      color : #f00;
  }
  
  
  body.tabs #tab-links li#nav-1 a, 
  body.tabs #tab-links li#nav-2 a {
      background : #fff;
      border-bottom : 1px solid #fff;
      color : #000;
  }
  
  #tab-links #subnav-1,
  #tab-links #subnav-2 {
      display : none;
      width: 90%;
  }
  
  body.tabs #tab-links ul#subnav-1, 
  body.tabs #tab-links ul#subnav-2 {
      display : inline;
      left : 10px;
      position : absolute;
      top : 95px;
  }
  
  body.tabs #tab-links ul#subnav-1 a, 
  body.tabs #tab-links ul#subnav-2 a {
      background : #fff;
      border : none;
      border-left : 1px solid #ccc;
      color : #999;
      font-size : smaller;
      font-weight : bold;
      line-height : 10px;
      margin-right : 4px;
      padding : 2px 10px 2px 10px;
      text-decoration : none;
  }
  
   #tab-links ul a:hover {
      color : #f00 !important;
  }
  
  #contents {
      background : #fff;
      border : 1px solid #ccc;
      border-top : none;
      clear : both;
      margin : 0px;
      padding : 15px;
  }
  
       #phones {
          font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
          font-size: 12px;
          background: #fff;
          margin: 15px 25px 0 0;
          border-collapse: collapse;
          text-align: left;
          float: left;
        }
  
        #phones th {
          font-size: 14px;
          font-weight: normal;
          color: #039;
          padding: 0px 1px;
          border-bottom: 12px solid #6678b1;
        }
  
        #phones td {
          border-bottom: 0px solid #ccc;
          color: #669;
          padding: 1px 1px;
        }
  
        #phones tbody tr:hover td {
          color: #009;
        }
  
        #filter {
          float:left;
        }
  
        fieldset{
          margin-top: 15px;
        }
  
        fieldset div{
          padding:0 0 5px 0;
        }
  
        .amount{
          width:50px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt; 
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 
  
    &lt;div class="tabs"&gt;
             &lt;ul class="tab-links"&gt;
                &lt;li id="nav-1"&gt;&lt;a href="#tab1"&gt;Tab #1&lt;/a&gt;&lt;/li&gt;
                &lt;li id="nav-2"&gt;&lt;a href="#tab2"&gt;Tab #2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
  
          &lt;div class="tab-content"&gt;
              &lt;div id="tab1" class="tab active"&gt;
                  &lt;table id="phones"&gt;
                                  &lt;thead&gt;
                                  &lt;tr&gt;
  
                                  &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
                                  &lt;/tbody&gt;
                                      &lt;/table&gt;
                      &lt;/div&gt;
  
                      &lt;div id="tab2" class="tab"&gt;
                          &lt;input type="checkbox" id="Anzahl_Fahrzeuge_mit_und_ohne_Bilder" checked&gt;
          &lt;label for="Anzahl_Fahrzeuge_mit_und_ohne_Bilder"&gt;Anzahl_Fahrzeuge_mit_und_ohne_Bilder&lt;/label&gt;&lt;br&gt;
  
               &lt;input type="checkbox" id="Fahrzeuge_ohne_Preis" checked&gt;
          &lt;label for="Fahrzeuge_ohne_Preis"&gt;Fahrzeuge_ohne_Preis&lt;/label&gt;
          &lt;button id="submitFilter"&gt;Filter&lt;/button&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  
          &lt;script&gt;
        function makeTable(data){
          var tbl_body = "";
          $.each(data, function() {
            var tbl_row = "",
                currRecord = this;
  
            $.each(this, function(k , v) {
              if(k==='model'){
                v = "&lt;a href='content.php?id=" + currRecord['id'] +"'&gt;" + v + "&lt;/a&gt;";
              } else if (k==='price'){
                v = "&lt;span class='price'&gt;" + v + "&lt;/span&gt;";
              }
              tbl_row += "&lt;td&gt;"+v+"&lt;/td&gt;";
            })
            tbl_body += "&lt;tr&gt;"+tbl_row+"&lt;/tr&gt;";
          })
  
          return tbl_body;
        }
  
        function getPhoneFilterOptions() {
       var opts = [];
       $("input[type=checkbox]").each(function () {
           if (this.checked) {
               opts.push($(this).attr("id"));
           }
       });
  
       return opts;
   }
  
        function updatePhones(opts){
          if(!opts || !opts.length){
            opts = allBrands;
          }
  
          $.ajax({
            type: "POST",
            url: "submit.php",
            dataType : 'json',
            cache: false,
            data: {filterOpts: opts},
            success: function(records){
              $('#phones tbody').html(makeTable(records));
  
            }
          });
        }    
  
              $('.tabs .tab-links a').on('click', function (e) {
       var currentAttrValue = $(this).attr('href');
  
       // Show/Hide Tabs
       $('.tabs ' + currentAttrValue).show().siblings().hide();
  
       // Change/remove current tab to active
       $(this).parent('li').addClass('active').siblings().removeClass('active');
  
       e.preventDefault();
   });
  
        $("#submitFilter").on("click", function () {
       var opts = getPhoneFilterOptions();
            updatePhones(opts);
            ("#tab2").show().siblings().hide();
   });
  
  
        var allBrands = [];
        $("input[type=checkbox]").each(function(){
          allBrands.push($(this)[0].id)
        })
  
        updatePhones();
  
      &lt;/script&gt; 
    &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>