How to hide Element

Question

This is my code. How can I make the tabs menu1Tab menu2Tab menu3Tab hidden instead of using script? Because when i refresh the page it shows for 500ms or something like that.

If you guys know a better way to make this please help me.

$('#menu1Tab').hide();
$('#menu2Tab').hide();
$('#menu3Tab').hide();


$('#menu1toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu1Tab').show();
        }
        else {
            $('#menu1Tab').hide();
        }
    });
    
    $('#menu2toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu2Tab').show();
        }
        else {
            $('#menu2Tab').hide();
        }
    });


$('#menu3toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu3Tab').show();
        }
        else {
            $('#menu3Tab').hide();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
  
  <div class="checkbox">
      <label><input type="checkbox" id="menu1toggle" checked>Menu 1</label>
  </div>
   <div class="checkbox">
      <label><input type="checkbox" id="menu2toggle">Menu 2</label>
  </div>
   <div class="checkbox">
      <label><input type="checkbox" id="menu3toggle">Menu 3</label>
  </div>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" id="homeTab">Home</a></li>
    <li><a data-toggle="tab" href="#menu1" id="menu1Tab">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2" id="menu2Tab">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3" id="menu3Tab">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

i edited by question: How can I make the tabs menu1Tab menu2Tab menu3Tab hidden — , Oct 18 '17 at 13:00
@pedram but when I refresh the page I see the tab for some milisecounds. surelly there's a way to fix this. — , Oct 18 '17 at 13:09
If i see this problem live, maybe find a solution, but in this demo everything is fine — Pedram, Oct 18 '17 at 13:14
@pedram "The answer is: No. you can't do this without js code" That is wrong, you could achieve this without one bit JS and just CSS... — ToTaTaRi, Oct 18 '17 at 13:53

score 2 · Answer 1 · answered Oct 18 '17 at 13:33

2

 <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" id="homeTab">Home</a></li>
<li style="display:none;"><a data-toggle="tab" href="#menu1" id="menu1Tab">Menu 1</a></li>
<li style="display:none;"><a data-toggle="tab" href="#menu2" id="menu2Tab">Menu 2</a></li>
<li style="display:none;"><a data-toggle="tab" href="#menu3" id="menu3Tab">Menu 3</a></li>

answered Oct 18 '17 at 13:33

Nofar Eliasi

109
5

Exactly that's how it should be done... But I don't see the problem at all, maybe @sdasdasd just has a real slow connection or slow speed on server side, so the script takes too long for loading... :D – ToTaTaRi Oct 18 '17 at 13:47
the display none means that the tag in question will not appear on the page at all- unlike .hide(), look at this page - https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Nofar Eliasi Oct 18 '17 at 13:51
Taken from JQuery Docs: "The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline." - http://api.jquery.com/hide/ – ToTaTaRi Oct 18 '17 at 13:58
The prob is that the page renders with the tabs visible and then the script switches them to display: none, your solution works fine because the page renders with them inviseble! But the method hide() does exactly display: none nevertheless! – ToTaTaRi Oct 18 '17 at 14:00
what do you mean ? – Nofar Eliasi Oct 18 '17 at 14:07
Menu 1 $(".abc").css("display","block"); – Nofar Eliasi Oct 18 '17 at 14:08
Thats impossible... The script does exactly that... Switching the display via inline style... something must be different in you enviroment to the snippet here! Can we get a link? – ToTaTaRi Oct 18 '17 at 14:08
I see the prob... The "display: none" must be on the a-tag not li-tag... See my answer for a working example... – ToTaTaRi Oct 18 '17 at 14:13

score 1 · Answer 2 · edited Oct 18 '17 at 13:41

1

Why not set the tabs to be display: none in the CSS and then just change the CSS property with Jquery with $().css("display", "block") and $().css("display", "none") depending on the checkbox status?

edited Oct 18 '17 at 13:41

Hassan Imam

21,956
5
41
51

answered Oct 18 '17 at 13:01

Bojan Ivanac

1,170
8
17

I dont know why this answer was down voted, it is correct as the one from @Nofar Eliasi is... Just the setting of "$().css("display", "block")" and so on is unneassery because this is already done with the JQuery function show() and hide() in the example code! – ToTaTaRi Oct 18 '17 at 13:50

score 1 · Accepted Answer · edited Jan 14 '18 at 09:28

WORKING EXAMPLE:

$('#menu1toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu1Tab').show();
        }
        else {
            $('#menu1Tab').hide();
        }
    });
    
    $('#menu2toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu2Tab').show();
        }
        else {
            $('#menu2Tab').hide();
        }
    });


$('#menu3toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu3Tab').show();
        }
        else {
            $('#menu3Tab').hide();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
  
  <div class="checkbox">
      <label><input type="checkbox" id="menu1toggle" checked>Menu 1</label>
  </div>
   <div class="checkbox">
      <label><input type="checkbox" id="menu2toggle">Menu 2</label>
  </div>
   <div class="checkbox">
      <label><input type="checkbox" id="menu3toggle">Menu 3</label>
  </div>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" id="homeTab">Home</a></li>
<li><a data-toggle="tab"  style="display:none;" href="#menu1" id="menu1Tab">Menu 1</a></li>
<li><a data-toggle="tab"  style="display:none;" href="#menu2" id="menu2Tab">Menu 2</a></li>
<li><a data-toggle="tab"  style="display:none;" href="#menu3" id="menu3Tab">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

thanks. I have to use display none on `a` not on `li` – Oct 18 '17 at 14:45 — , Oct 18 '17 at 14:45

score 0 · Answer 4 · answered Oct 18 '17 at 13:32

I think what you want to do is trigger the function on load. You can do that by putting it inside a function that runs everything inside it when the page loads.

$(function () {
    $('#menu2Tab').hide();
    $('#menu3Tab').hide();


    $('#menu1toggle').change(function() {
            if($(this).is(":checked")) {
                $('#menu1Tab').show();
            }
            else {
                $('#menu1Tab').hide();
            }
    });

    $('#menu2toggle').change(function() {
            if($(this).is(":checked")) {
                $('#menu2Tab').show();
            }
            else {
                $('#menu2Tab').hide();
            }
    });


    $('#menu3toggle').change(function() {
            if($(this).is(":checked")) {
                $('#menu3Tab').show();
            }
            else {
                $('#menu3Tab').hide();
            }
    });
});

score 0 · Answer 5 · answered Oct 18 '17 at 13:56

Try following code

$('document').ready(function() {
  $('#menu1Tab').hide()
  $('#menu2Tab').hide()
  $('#menu3Tab').hide()

  $('#homeTab').on('click', function() {


    $('#menu1Tab').show()
    $('#menu2Tab').show()
    $('#menu3Tab').show()

  });
});

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home" id="homeTab">Home</a></li>
  <li><a data-toggle="tab" href="#menu1" id="menu1Tab">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2" id="menu2Tab">Menu 2</a></li>
  <li><a data-toggle="tab" href="#menu3" id="menu3Tab">Menu 3</a></li>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

How to hide Element

5 Answers5