How to completely show hide tabs on onclick event in HTML CSS Javascript


Tags: javascript,jquery,html,css,tabs

Problem :

I have small working project here.Please check the demo here:demo I only have to make small changes in this by completely hiding the tabs. So when i run this project only 1 tab should be visible. And by clicking the image only tab2 should be visible. And while clicking the filter button on tab2 only tab1 should be visible.So basically i just want to visible only 1 tab . Any help ? Thanks. Here is my code:

<html>
  <head>
    <meta charset="utf-8">
    <title>Dashboards</title>
       <style>
          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;
      }

.active a{color:red !important; background-color:#fff !important}
.tab{display:none}
  </style>
  </head>
  <body> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 

   <div class="tabs">
           <ul class="tab-links">
              <li id="nav-1" class='active'><a href="#tab1">Fahrzeuge</a></li>
              <li id="nav-2"><a href="#tab2">Edit Fahrzeuge</a></li>
           </ul>
   </div>


        <div class="tab-content">
            <div id="tab1" class="tab" style='display:block'>
                <table id="phones">
                                <thead>
                                    <img id="filtered" src="edit.png" width="20" height="20" style="margin-top:20px; margin-left:10px; float: center;" >
                                <tr>

                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                                    </table>
                    </div>
                    <div id="tab2" class="tab">
                        <input type="checkbox" id="Anzahl_Fahrzeuge_mit_und_ohne_Bilder" checked />
                                        <label for="Anzahl_Fahrzeuge_mit_und_ohne_Bilder">Anzahl_Fahrzeuge_mit_und_ohne_Bilder</label><br>

                        <input type="checkbox" id="Fahrzeuge_ohne_Preis" checked />
                                        <label for="Fahrzeuge_ohne_Preis">Fahrzeuge_ohne_Preis</label>
                                        <button id="submitFilter">Filter</button> 
                     </div>
            </div>



        <script>
                $(document).ready(function(){    
                function makeTable(data){
        var tbl_body = "";
        $.each(data, function() {
          var tbl_row = "",
              currRecord = this;

          $.each(this, function(k , v) {
            if(k==='model'){
              v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
            } else if (k==='price'){
              v = "<span class='price'>" + v + "</span>";
            }
            tbl_row += "<td>"+v+"</td>";
          })
          tbl_body += "<tr>"+tbl_row+"</tr>";
        })

        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');
    // alert('.tabs ' + currentAttrValue);
     // Show/Hide Tabs

     $('.tab-content ' + 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);
          $('.tab-content #tab1').show().siblings().hide(); 
          e.preventDefault();
 });

 $("#filtered").on("click", function () {

          $('.tab-content #tab2').show().siblings().hide(); 
          e.preventDefault();
 });


      var allBrands = [];
      $("input[type=checkbox]").each(function(){
        allBrands.push($(this)[0].id)
      })

      updatePhones();
});


    </script> 
  </body> 
</html>


Solution :

solved it:

.tab-links li { display:none;}
.tab-links li.active { display:inline;}

http://jsfiddle.net/aK7NB/

what I did is basically give the #nav li's 'display:none' and when they have class 'active' they are display:block.. then in the js just give the active class if you want to see and remove it if you want to hide... check the example


    CSS Howto..

    How to avoid calling “fonts.googleapis.com/css?family=..” for my CSS files

    How to keep navigation tab remain unchanged

    How does css scale transform affect document flow?

    how to create table grid view fix header with long title name using only CSS?

    How to get divs 100% of browser using css?

    How can I position a form with controls over a Google Map?

    How to select two different elements with an XPath query

    How to have full page that is not a background img or fixed positioned?

    CSS Clouds - How to adjust to inner content?

    how to add active css class to a link in Wordpress

    How can i add dotted line in front of menu

    How to assign data attribute in css?

    How to stick to bottom on layout by using CSS?

    How to use CSS Rotate() in TH Table Tags

    How to hide main menu while showing sub-menu in css

    How to create custom horizontal radio buttons with CSS?

    how to use two css style in a div or span

    how to align css content string

    Angularjs: How to *retrieve* css property from element in directive?

    How to size a content div to cover the entire content area in jQuery Mobile

    How can I make my footer stay at the bottom with a dynamically re-sizable form?

    How to use Javascript to check and load CSS if not loaded?

    How to display 3 buttons on the same line in css

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    How to remove horizontal space between divs that contain fixed size svg elements?

    how to force 100% height on a dynamic drive css fluid/fixed layout

    Sub menu wont show when menu item hovered over (css html)

    How to create a CSS only (vertical) drop-down menu?

    How to align the overlay with the list of icons on hover- JS /CSS

    how to place an image at the center of the browser irrespective of the resolution?