JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="accordion">
    <dt><a href="" class="heading">Tester</a></dt>
    <dd>
        <span id="tester"></span>
        <span id="anothertester"></span>
        <p>bla</p>
    </dd>
    
    <dt><a href="" class="heading">Sports</a></dt>
    <dd>
        <span id="football"></span>
        <span id="basketball"></span>
        <p>bla</p>
    </dd>
    
    <dt><a href="" class="heading">Others</a></dt>
    <dd>
        <span id="rugby"></span>
        <span id="biljart"></span>
        <p>bla</p>
    </dd>
    </dl>

CSS

.heading {background:red}
.active {background:black}

JavaScript

(function($) {
    var allPanels = $('.accordion > dd').hide();
    var allLinks = $('a.heading');
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();
        
        //Remove all 
        allLinks.removeClass('active');
        
        if ($(this).parent().next().is(":visible")) return false;
        $(this).parent().next().slideDown();
        
        //Add active class
        $(this).addClass('active');
        
        return false;
    });
    //$('.accordion > dt > a').first().trigger('click');
    
    function setAccordion() {
        // Get id from url
        // var url = window.location.pathname;
        // Test url
        var url = 'localhost:58000/gallery#rugby';
        var id = url.substring(url.lastIndexOf('#')); // This will give you #football
        var spanTag = $('.accordion').find(id); //#football span tag
        var parentTag = spanTag.closest('dd');
    
        //open the accordion
        allPanels.slideUp();
        parentTag.slideDown(); 
        parentTag.prev('dt').find('a.heading').addClass('active');
    }
    
    // Call the function
    setAccordion();
})(jQuery);