jQuery Toggle: Show and Hide an Element on Click

Want to show and hide an element using jQuery with one click? This guide will walk you through a clean, reusable jQuery toggle you can drop into any page. We’ll keep it simple, fast, and friendly. By the end you’ll be able to plug a jQuery click into buttons, links, or icons, and control any block of content.

You often want to show information on request: answers to frequently asked questions, details of products, filters, or a menu on mobile. In this case, toggling keeps pages clean and loads faster because you’re showing content only when users request it.

Show and hide a div using jQuery

Let’s take basic example to perform operation on element using jQuery events like toggle. Add below code into your project to check:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Toggle: Show and Hide an Element on Click</title>
  <style>
    body{font-family:system-ui,Arial,sans-serif;padding:24px}
    .card{max-width:560px;border:1px solid #ddd;border-radius:8px;padding:16px}
    .content{display:none;margin-top:12px}
    .btn{padding:10px 14px;border:0;background:#2563eb;color:#fff;border-radius:6px;cursor:pointer}
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <div class="card">
    <button id="toggleBtn" class="btn">Show Details</button>
    <div id="details" class="content">
      <p>This panel reveals extra info on click. Click the button again to hide it.</p>
    </div>
  </div>

  <script>
    $(function(){
      $('#toggleBtn').on('click', function(){
        $('#details').slideToggle(200);
        $(this).text($('#details').is(':visible') ? 'Hide Details' : 'Show Details');
      });
    });
  </script>
</body>
</html>

It uses the jQuery click event to toggle the panel with a smooth slide. It also switches the button label so users always know what will happen next.

Basic toggle using jQuery

Toggle is another use case of changing element’s state using jQuery. It’s perform visibility change operation for any element. Here, visibility change means each click perform visa-verse operation like hiding element if it’s visible and make it visible if it’s hidden.

<button id="t1">Toggle Box</button>
<div id="box1">I appear and disappear.</div>
<script>
  $(function(){
    $('#t1').on('click', function(){
      $('#box1').toggle();
    });
  });
</script>

Fade Effect With Specific Time Set

You can also add fade effect with setting time. Let’s take example for that.

<button id="t2">Fade Toggle</button>
<div id="box2">Soft fade in and out.</div>
<script>
  $(function(){
    $('#t2').on('click', function(){
      $('#box2').fadeToggle(200);
    });
  });
</script>

Toggle by adding/removing a class

jQuery provides in-built way for toggle element how ever you can extend it using class which handles visibility of element. Let’s take an example to show and hide element using adding and removing class.

<button id="t3">Class Toggle</button>
<div id="box3" class="is-hidden">Hidden via CSS class.</div>
<style>
  .is-hidden{display:none}
</style>
<script>
  $(function(){
    $('#t3').on('click', function(){
      $('#box3').toggleClass('is-hidden');
    });
  });
</script>

Conclusion

You can implement jQuery Toggle: Show and Hide an Element on Click in minutes: pick the effect you like, wire the click, and keep content tidy and fast. When you need it, just show and hide an element using Jquery again for another section, button, or menu.

Codewolfy