How can I show and hide div on mouse click using jQuery?

jQueryWeb DevelopmentFront End Technology

To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#show').click(function() {
      $('.menu').toggle("slide");
    });
});
</script>
</head>
<body>

<div id="show">Click to Show/ Hide div</div>
 <div class="menu" style="display: none;">
    <ol>
      <li>India</li>
      <li>US</li>
      <li>UK</li>
      <li>Australia</li>
    </ol>
 </div>
</body>
</html>
raja
Published on 22-Dec-2017 16:12:07
Advertisements