CODEWITHSUNDEEP
javascripthtmljquerycsscss-selectors
Niraj Singh
Niraj Singh

Reputation: 51

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>

Upvotes: 3

Views: 65

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337550

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>

Upvotes: 2

Related Questions