Question 10891 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery .fadeToggle() not working properly: Automatically fades out

$(document).on('click', '.tree label', function(e) {
  $(this).next('ul').fadeToggle();
  e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tree">
  <li class="has">
    <label class="container">ROOT<span class="total">(12) </span>
<input type="checkbox" name="domain[]" value="ROOT">
<span class="checkmark"></span></label></ul>

<ul style="display: none;">
  <li><label class="container">CHILD<input type="checkbox" name="subject[]" value="CHILD"><span class="checkmark"></span></label></li>
</ul></li>
</ul>

When I click the first label it should fadeToggle the next ul. But as soon as it fades in it fades out automatically.

Can anyone please let me know where is the issue? Is HTML format is incorrect?

Tags:

2

Answers


  1. 0

    Your html markup is wrong. You haven’t closed the first ul.

    $(document).on('click', '.tree label', function(e) {
  $(this).next('ul').fadeToggle();
  e.stopPropagation();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tree">
  <li class="has">
    <label class="container">ROOT<span class="total">(12) </span>
<input type="checkbox" name="domain[]" value="ROOT">
<span class="checkmark"></span></label>

    <ul style="display: none;">
      <li><label class="container">CHILD<input type="checkbox" name="subject[]" value="CHILD"><span class="checkmark"></span></label></li>
    </ul>
</ul>

    It does not fade out for me. Here’s a screenshot

    ss

    Login or Signup to reply.
  2. 0

    Your last edit added a </li></ul> but they are misplaced – the </ul> is not required at all, and the <li> should be after the first checkbox. I’ve removed them in the code below.

    The code snippet does not display the problem you describe – the CHILD is not displayed at all. That’s because .next() selects the next sibling. Sibling means an element at the same level in the DOM tree, but you’re looking for siblings of your <label>. If you format the HTML correctly it is easier to see:

    <ul class="tree">
    <li class="has">
        <label class="container">ROOT
            <span class="total">(12)</span>
            <input type="checkbox" name="domain[]" value="ROOT">
            <span class="checkmark"></span>
        </label>
        <!-- This is where any siblings of $('.tree label') would be -->
    </li> <!-- This /li is missing from your HTML -->
</ul>

    If you have a series of these on the page, and the logic is that you really want the next one down, you could use .closest() to find the parent ul of the event click, and then use .next() to get the following ul. Like so:

    $(document).on('click', '.tree label', function(e) {
    $(this).closest('ul').next('ul').fadeToggle();
    e.stopPropagation();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tree">
    <li class="has">
        <label class="container">ROOT
            <span class="total">(12)</span>
            <input type="checkbox" name="domain[]" value="ROOT">
            <span class="checkmark"></span>
        </label>
    </li>
</ul>

<ul style="display: none;">
    <li>
        <label class="container">CHILD
            <input type="checkbox" name="subject[]" value="CHILD">
            <span class="checkmark"></span>
        </label>
    </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search