Teach with us

How to toggle a div visibility using jQuery?

To toggle a div visibility in jQuery, use the toggle() method. It checks the div element for visibility i.e. the show() method if div is hidden. And hide() id the div element is visible. This eventually creates a toggle effect.

The toggle( speed, [callback]) method toggles displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.

Here is the description of all the parameters used by this method −

  • speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback − This is optional parameter representing a function to call once the animation is complete.

Example

You can try to run the following code to toggle div visibility using jQuery −

Live Demo

<html>

   <head>
      <title>jQuery toggle() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
   
         $(document).ready(function() {

            $("#toggle").click(function(){
               $(".target").toggle( 'slow', function(){
                  $(".log").text('Toggle Transition Complete');
               });
            });
         });
           
      </script>
       
      <style>
         p {
             background-color:#bca;
             width:200px;
             border:1px solid green;
         }
      </style>
   </head>
   
   <body>

      <p>Click on the following button:</p>
      <button id = "toggle"> Toggle </button>

      <div class = "target">
         <img src = "../images/jquery.jpg" alt = "jQuery" />
      </div>
       
      <div class = "log"></div>
 
   </body>
</html>
Updated on 17-Feb-2020 10:04:26

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements