Question: 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.

```html
     <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.

```js
$(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.
This involves a bit of JavaScript. On load you can look for the [Location: hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/hash) (that you already have in your URL). Do stuff to the page. In my example I create the element that gets the hash and then use [Element.scrollIntoView()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) to navigate to that element.

```js
window.location.hash = 'test'; // For testing. This has already been set in the URL.

document.addEventListener('DOMContentLoaded', e => {
  // find the hash
  let hash = window.location.hash.slice(1); // slice: remove the '#'
  // add a new element (or make is visible etc.)
  document.querySelector('main').innerHTML = `<h2 id="${hash}">${hash}</h2>`;
  // scroll to the anchor
  document.querySelector(`#${hash}`).scrollIntoView();
});
```

```css
main {
  height: 2000px;
  position: relative;
}

h2#test {
  position: absolute;
  top: 1000px;
}
```

```html
<main><main>
```