Click on url, redirect to another page and scroll down to hidden anchored div

Has anyone of you came across a similar problem I have. I have links on one page of my website which redirect to the second page where I have a menu that is showing one menu option at a time. By default, the first option is visible when I open up the second page. But how can I get a result when I click on a link like this to show the hidden div and scroll down to the specific part of the divs content?

Link on the first page. It’s supposed to load option 4 and scroll down to anchor #extrainformation.

     <div class="linktosecondpage" onclick="window.open('http://localhost/mypage/secondpage#extrainformation','_self');"> 
    </div>

How does the menu look on the second page?

https://jsfiddle.net/wmr03zno/3/

I have considered writing out a function to each link that activates when clicked on the link, redirects to the second page, shows the hidden option of the page, removes and adds class to h4, and scrolls down to desired anchor(#extrainformation). That’s the idea I have right now. Just wondering if there is an easier workaround to this kind of problem.

Answer

I’ve been thinking about it and trying stuff out. I tried out solutions above answered by @ciekals11 and @chrwahl but couldn’t get these working. Probably because I am too amateur with js/Jquery.

Anyways my solution looks like this.

$(document).ready(function() {
    if (
        window.location.href == "http://localhost/mypage/secondpage#extrainformation"
    ) {
        $(".tabs h4").removeClass("tab-current");
        $(".tabs ul li:nth-child(4) h4").addClass("tab-current");
        $("#section1").fadeOut();
        $("#section4").fadeIn();
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#extrainformation").offset().top
        }, 1000);

        return false;
    }
});

This probably isn’t the best answer but it works. Any other recommendations and solutions are welcome.