jquery next div element select

I want to select next div class form_part by button event that is in another div but it is not working somehow how can i fix this. it working fine within same div in header event. anybody could help thank you.

$(document).ready(function() {
  $(".form_part").hide(); // Header event 

  $(".form_container h3").click(function() {
    $(this).next(".form_part").slideToggle();
  }); // Button event

  $(".form_container button").click(function() {
    $(this).parent(".form_part").next(".form_part").slideToggle();
    console.log("button clicked");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form_container">
  <div class="first_tab">
    <h3 class="form_heading">
      first tab
    </h3>
    <div class="form_part">
      <p>
        Lorem ipsum,
      </p>
      <button>Next</button>
    </div>
    <hr>
  </div>
  <div class="second_tab">
    <h3 class="form_heading">
      second tab
    </h3>
    <div class="form_part">
      <p>
        Lorem ipsum dolor
      </p>
      <button>Next</button>
    </div>
    <hr>
  </div>
  <div class="third_tab">
    <h3 class="form_heading">
      third tab
    </h3>
    <div class="form_part">
      <p>
        Lorem ipsum dolor sit ame
      </p>
    </div>
    <hr>
  </div>
</div>

1 answer

  • answered 2021-07-27 18:23 Rory McCrossan

    The issue is because the .form_part elements are not siblings, so next() doesn't return anything to perform the slideToggle() action on.

    To correct this you need to go up the DOM tree to find the elements which are siblings between the HTML common HTML structure. In this case it would be the .N_tab elements. You can make selecting them simpler by putting the same class on each. In this example I used .tab. From there you can use next() and find() to target the element you want to toggle. Try this:

    jQuery($ => {
      $(".form_container h3").click(e => {
        $(e.target).next(".form_part").slideToggle();
      });
    
      $(".form_container button").click(e => {
        let $button = $(e.target);
        $button.closest('.form_part').slideToggle();
        $button.closest(".tab").next('.tab').find(".form_part").slideToggle();
      });
    });
    .form_part {
      display: none;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="form_container">
      <div class="tab first_tab">
        <h3 class="form_heading">first tab</h3>
        <div class="form_part">
          <p>Lorem ipsum,</p>
          <button>Next</button>
        </div>
        <hr>
      </div>
      <div class="tab second_tab">
        <h3 class="form_heading">second tab</h3>
        <div class="form_part">
          <p>Lorem ipsum dolor</p>
          <button>Next</button>
        </div>
        <hr>
      </div>
      <div class="tab third_tab">
        <h3 class="form_heading">third tab</h3>
        <div class="form_part">
          <p>Lorem ipsum dolor sit ame</p>
        </div>
        <hr>
      </div>
    </div>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum