JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id="mobile-menu">
<ul class="mobile-nav">
    <li><a href="index.php">Home</a></li>
    <li class="has-child"><a href="#">Platform <i class="fas fa-angle-right"></i></a>
        <ul class="child-nav">
            <li><a href="hr.php">HR</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
    <li class="has-child"><a href="#">Platform <i class="fas fa-angle-right"></i></a>
        <ul class="child-nav">
            <li><a href="hr.php">HR</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
    <li class="has-child"><a href="#">Platform <i class="fas fa-angle-right"></i></a>
        <ul class="child-nav">
            <li><a href="hr.php">HR</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
</ul>

CSS

.open-child.arrow-open{
  background:red;
}

JavaScript

$('.has-child').click(function() {
$(this).siblings().removeClass('open-child');
$(this).siblings().removeClass('arrow-open');
    $(this).toggleClass('open-child');
    
    // remove classes from all
    
    // add class to the one we clicked
    $('.fa-angle-right', this).addBack(this).toggleClass('arrow-open');
});