• Custom Printed T-shirts
  • Seo Expert
  • Bisen Infotech
  • Khaali Paper

Show and Hide Div with JavaScript

Learn to use CSS and JavaScript to show and hide Div. use hide() or show() method for hide div or show div. The hide() method hides the selected elements and the show() method shows the selected elements.

Hide Div or Show Div

To Create a hide() or show() method it takes following steps:-

  1. Create a click event or button to call hide() or show() medhod.
  2. Write a javascript function for hide() or show() medhod.
  3. One line css have to write for display none.
  • Html
  • CSS/JavaScript
  • Example
<a href="#!" class="hide-btn">Hide Div</a> | <a href="#!" class="show-btn">Show Div</a>
<div class="box">
    This is hide by default, when press on the Show Div this div will be display.
</div>
.box {
  display: none;
}

<script>
$(document).ready(function(){
    $(".hide-btn").click(function(){
        $(".box").hide();
    });
    $(".show-btn").click(function(){
        $(".box").show();
    });
});
</script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Hello, world!</title>
    <style>
      .box {
        display: none;
      }
    </style>
  </head>
  <body>

      <a href="#!" class="hide-btn">Hide Div</a> | <a href="#!" class="show-btn">Show Div</a>
      <div class="box">
          This is hide by default, when press on the Show Div this div will be display.
      <div'>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
          $(".hide-btn").click(function(){
              $(".box").hide();
          });
          $(".show-btn").click(function(){
              $(".box").show();
          });
      });
    </script>
  </body>
</html>

In this tutorial we learn that how to show and hide div on click.

You can customize this code further as per your requirement.

Another Option for hide and show method using toggle(); method

Toggle Hide and Show div

//Html
<a href="#!" class="toggle-btn">Hide Div / Show Div</a>

//Css
.box {
  display: none;
}

//JavaScript
<script type="text/javascript">
  $(document).ready(function(){
      // Toggles paragraphs display
      $(".toggle-btn").click(function(){
          $(".box").toggle();
      });
  });
</script>

Hide and show div using javascript

You can optionally specify the duration (also referred as speed) parameter for making the jQuery show hide effect animated over a specified period of time. Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds, for greater precision; higher values indicate slower animations.

.hide('slow'); OR .hide('200');

.show('fast'); OR .show('2000');

You can customize this code further as per your requirement.