CODEWITHSUNDEEP
jquerycsshovertoggle
H. Ferrence
H. Ferrence

Reputation: 8116

How to get the next instance of a class using jQuery

I have this markup:

  <div class="forPadding">
    <div class="helpSpot"><i class="far fa-question-circle"></i></div>
    <label class="required" for="my_name">Name</label>
    <input class="inputPadding required" id="my_name" name="name" placeholder="Enter your name" type="text" required>
  </div>
  <div class="helpInstructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat ut quam varius porttitor. Nunc congue aliquam pharetra. Aenean condimentum dignissim nibh ut commodo. Morbi sodales mi a felis imperdiet, convallis eleifend tortor egestas. Etiam aliquam, eros in vestibulum feugiat, velit enim eleifend nisl, non mattis sem nisl id ex. Morbi diam neque, malesuada vel est vel, tristique commodo nibh. Integer in bibendum quam. Proin vestibulum ex non sodales dictum. Etiam sit amet facilisis risus, in ullamcorper sapien. Integer vitae est quam.</div>

When I hover (mouseover) the div.helpSpot element I want to reveal the help instructions. They load on the page as style display:none. And when I move away from the div.helpSpot (mouseout) I want the help instructions to disappear.

I have tried these jQuery commands and I cannot accomplish my goal:

$('.helpSpot').on('mouseover', function() {
  console.log('mouse over');
  // $('.helpInstructions').css( 'display', 'block' ); // WORKS BUT FOR ALL CLASS NAME INSTANCES
  //$(this).closest('div').next().find('.helpInstructions').css( 'display', 'block' ); // DOES NOT WORK
  //$(this).closest('.helpInstructions').css( 'display', 'block' ); // DOES NOT WORK
  //$(this).find('.helpInstructions').attr('class').css( 'display', 'block' ); // DOES NOT WORK
  //      $(this).closest('div').find('.helpInstructions').css( 'display', 'block' ); // DOES NOT WORK
  $(this).closest('div.forPadding').find('.helpInstructions').css('display', 'block'); // DOES NOT WORK
});
$('.helpSpot').on('mouseout', function() {
  console.log('mouse out');
  // $('.helpInstructions').css( 'display', 'none' ); // WORKS BUT FOR ALL CLASS NAME INSTANCES
  //$(this).closest('div').next().find('.helpInstructions').css( 'display', 'none' ); // DOES NOT WORK
  //$(this).closest('.helpInstructions').css( 'display', 'none' ); // DOES NOT WORK
  //$(this).find('.helpInstructions').attr('class').css( 'display', 'none' ); // DOES NOT WORK
  //      $(this).closest('div').find('.helpInstructions').css( 'display', 'none' ); // DOES NOT WORK
  $(this).closest('div.forPadding').find('.helpInstructions').css('display', 'none'); // DOES NOT WORK
}); // hover listener on help spots

Any thoughts? Thank you!

P.S. a toggle solution would be much appreciated.

Upvotes: 0

Views: 61

Answers (1)

Barmar
Barmar

Reputation: 781751

Use .next(). You can optionally add a selector to make sure it doesn't match the element if it's the wrong class.

And you can use .hover() to combine mouse over and mouse out events.

$(".helpSpot").hover(function() {
  console.log("mouse over");
  $(this).closest(".forPadding").next(".helpInstructions").show();
}, function() {
  console.log("mouse out");
  $(this).closest(".forPadding").next(".helpInstructions").hide();
});
.helpInstructions {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="forPadding">
  <div class="helpSpot"><i class="far fa-question-circle">help</i></div>
  <label class="required" for="my_name">Name</label>
  <input class="inputPadding required" id="my_name" name="name" placeholder="Enter your name" type="text" required>
</div>
<div class="helpInstructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat ut quam varius porttitor. Nunc congue aliquam pharetra. Aenean condimentum dignissim nibh ut commodo. Morbi sodales mi a felis imperdiet, convallis eleifend tortor egestas. Etiam
  aliquam, eros in vestibulum feugiat, velit enim eleifend nisl, non mattis sem nisl id ex. Morbi diam neque, malesuada vel est vel, tristique commodo nibh. Integer in bibendum quam. Proin vestibulum ex non sodales dictum. Etiam sit amet facilisis risus,
  in ullamcorper sapien. Integer vitae est quam.</div>

You were close when you tried $(this).closest('div').next().find('.helpInstructions'), but .find() looks for descendants, it won't match the element it's searching from, which is the .helpInstructions element.

Upvotes: 1

Related Questions