CODEWITHSUNDEEP
javascriptjqueryhtml
user8795647
user8795647

Reputation:

How to hide Element

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>

Upvotes: 1

Views: 104

Answers (5)

ToTaTaRi
ToTaTaRi

Reputation: 319

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>

Upvotes: 1

Nisal Edu
Nisal Edu

Reputation: 7591

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>

Upvotes: 0

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

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?

Upvotes: 1

Nofar Eliasi
Nofar Eliasi

Reputation: 109

 <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>

Upvotes: 2

neicull
neicull

Reputation: 81

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();
            }
    });
});

Upvotes: 0

Related Questions