JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#info" id="info-link">Test</a>

<div class="info-main">".info-main"</div>

<div id="info-main-dummy">"info-main-dummy"</div>

<div id="info" style="display:none;">This is shown if url is in page url or is a hash or if we click on "#info"</div>

JavaScript

function page_url_contains_info(){
    console.log(window.location.href.indexOf("info") > -1);
    return(window.location.href.indexOf("info") > -1);
}

function InfoSection(a){
     $(".info-main").css({display: "none"}); 
        $("#info-main-"+active).fadeIn(600);
        $("#info").fadeIn(600);
}


if(page_url_contains_info()){
	InfoSection(2);
}


$('#info-link').click(function(e){
    e.preventDefault();
    var hash_orig = document.location.hash;
    var hash = hash_orig.replace('#', '');
    console.log(hash);
    if(hash === "info" || page_url_contains_info){
       InfoSection(2);
    }
});

var active = "dummy";

$(window).bind('hashchange', function() {
    var hash_orig = window.location.hash;
    var hash = hash_orig.replace('#', '');
    if( hash === "info" || page_url_contains_info ){
       InfoSection(1);
    }
});