Using jQuery to find the next div and show/hide it

user_5013948 0
Viewed 135

I'm working on an application that lists products/sub products. I'm trying to show the sub products when I click on the chevron. For some reason, I can't get this to work. I've been able to get the flipping of the chevron to work.

Here is my code:

<div class="item">
    Product 1
    <div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"></i></div>

    <div class="sub-item-list" style="display: none">            
        <div class="sub-item">
            Sub Product 1
        </div> 
    </div>
</div>

function expand(event) {
    if ($(event).hasClass("fa-chevron-down")){
        setTimeout(function () {///workaround
            $(event).removeClass("fa-chevron-down");                
        }, 10);
                      
        $(event).addClass("fa-chevron-up"); 
        $(event).closest('div').next().find("sub-item-list").css('display', 'inherit');

    } else {
        setTimeout(function () {///workaround
            $(event).removeClass("fa-chevron-up");                
        }, 10);

        $(event).addClass("fa-chevron-down");
        $(event).closest('div').next().find("sub-item-list").css('display', 'none');
    }
};

Can someone tell me that the issue is?

html jquery javascript
2 Answers

You can use .closest('div.item') to get the closest div and then use .find(".sub-item-list") to find the div which you need to display .

Demo Code :

function expand(event) {
  if ($(event).hasClass("fa-chevron-down")) {
    setTimeout(function() { ///workaround
      $(event).removeClass("fa-chevron-down");
    }, 10);

    $(event).addClass("fa-chevron-up");
    //get closest div with class item -> find class
    $(event).closest('div.item').find(".sub-item-list").css('display', 'inherit');

  } else {
    setTimeout(function() { ///workaround
      $(event).removeClass("fa-chevron-up");
    }, 10);

    $(event).addClass("fa-chevron-down");
     //get closest div with class item -> find class
    $(event).closest('div.item').find(".sub-item-list").css('display', 'none');
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  Product 1
  <div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"> >> </i></div>

  <div class="sub-item-list" style="display: none">
    <div class="sub-item">
      Sub Product 1
    </div>
  </div>
</div>

user_106064000

As you are setting onclick event on <i> tag you can also call parent().next() method instead of closest() to get subitem/product.

Try this example:

function expand(event)
{
    if ($(event).hasClass("fa-chevron-down"))
    {
        setTimeout(function() 
        {///workaround
            $(event).removeClass("fa-chevron-down");                
        }, 10);
                      
        $(event).addClass("fa-chevron-up"); 
        $(event).parent().next().css("display", "block");

    } 
    else 
    {
        setTimeout(function () 
        {///workaround
            $(event).removeClass("fa-chevron-up");                
        }, 10);
    
        $(event).addClass("fa-chevron-down");
        $(event).parent().next().css('display', 'none');
    }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
    Product 1
    <div style="float: right;">
        <i class="fas fa-fw fa-chevron-down" onclick="expand(this, event)">Toggle Chevron</i>
    </div>

    <div class="sub-item-list" style="display:none">            
        <div class="sub-item">
            Sub Product 1
        </div> 
    </div>
</div>

user_107271510
Related