Toggle classes with this as an event handler in jQuery

I want to toggle the content class independently when I click the collapsible class button associated with it. I read briefly on using this in event handlers. The way I’ve used it so far, I end up toggling the collapsible class (i.e the button) instead.

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title></title>
  <style>
    .collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }
    
    .active, .collapsible:hover {
      background-color: #555;
    }
    
    .content {
      padding: 0 18px;
      overflow: hidden;
      display: none;
      background-color: #f1f1f1;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
      $(".collapsible").on("click", function(){
        $(".content").toggle();
      });
    });
  </script>
</head>

<body>
  <button type="button" class="collapsible">Open Section 1</button>
  <div class="content contentDisp">
    <p>Hello There.</p>
  </div>
  <button type="button" class="collapsible">Open Section 2</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>
  <button type="button" class="collapsible">Open Section 3</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>

</body>

This is close to what I want but instead of toggling the button I want to toggle the div when I click the button.

<script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
          $(".collapsible").on("click", function(){
            $("this").toggle();
          });
        });
      </script>

Answer

You can use this in conjunction with next() by specifying the class name of the button.

$(document).ready(function(){
  $(".collapsible").on("click", function(){
    $(this).next('.content').toggle();
  });
});

    .collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }
    
    .active, .collapsible:hover {
      background-color: #555;
    }
    
    .content {
      padding: 0 18px;
      overflow: hidden;
      display: none;
      background-color: #f1f1f1;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <button type="button" class="collapsible">Open Section 1</button>
  <div class="content contentDisp">
    <p>Hello There.</p>
  </div>
  <button type="button" class="collapsible">Open Section 2</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>
  <button type="button" class="collapsible">Open Section 3</button>
  <div class="content contentDisp">
    <p>Hello there.</p>
  </div>

</body>

Advertisement

Answer