JSFiddle - React, Tailwind, and code Playground

HTML

<div class="infobox lightbox inlinks">
    <ul>
        <li><a href="#">Press releases</a></li>
        <li><a href="#">In the news</a>
            <ul>
              <li><a href="#">Photo galleries</a></li>
              <li><a href="#">Videos</a></li>
              <li><a href="#">Podcasts</a></li>
            </ul>
        </li>
        <li><a href="#">Media Centre</a></li>
        <li><a href="#">Fact Sheet</a></li>
        <li><a href="#">Press Contacts</a></li>
    </ul>
</div>

CSS

.expanded>a{color:red;}

JavaScript

$(document).ready(function(){
    //hides all subnav lists
     $('.infobox.lightbox.inlinks ul > li > ul').hide(); 
    
     $('.infobox.lightbox.inlinks ul > li').click(function(e){
         if($(this).children('ul').length>0){
             e.preventDefault();
             if($(this).children('ul').is(':visible')){
               $(this).find('ul').slideUp(),
               $(this).removeClass("expanded");
             }else{
               $(this).find('ul').slideDown(),
               $(this).addClass("expanded"); 
             }
         }
     });

 
    
});