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?