Show and Hide Div on Mouse Click using jQuery



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>
Updated on: 2020-06-15T11:02:16+05:30

19K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements