jQuery Navigate to another page and display div hidden

Question

I have two pages here: index and results. On the results.html, I have some divs with CSS property set as display: none. I would like to navigate from index (nav menu) and open the results pages while displaying the div that was hidden. The jQuery works fine on the results.html, but I don't know how can I trigger this function coming from the index.

Index:

<ul>
   <li><a id="menu-2016" href="results.html#2016">2016</a></li>
   <li><a id="menu-2015" href="results.html#2015">2015</a></li>
</ul>

Results:

<section id="2016">Content</section>
<section id="2015">Content</section>

CSS:

#section-2015, #section-2016 {
    display: none;
}

jQuery:

$(document).ready(function () {
    $("#menu-2016").click(function () {
        $("#section-2016").slideDown();
        $("#section-2015").slideUp();
    });
    $("#menu-2015").click(function () {
        $("#section-2015").slideDown();
        $("#section-2014").slideUp();
    });
});

Search about `window.hash` and in the event `window.onhashchange` . It would be your easy solution. — Marcos Pérez Gude, Feb 12 '16 at 13:59
What is `$("#section-2016")`? You have no element with this ID — StudioTime, Feb 12 '16 at 14:01

score 1 · Accepted Answer · answered Feb 12 '16 at 14:01

You can simply check the URL hash/fragment.

$(document).ready(function() {
    if (window.location.hash == '#2016') {
       $("#section-2016").slideDown();
       $("#section-2015").hide();
    }
    if (window.location.hash == '#2015') {
       $("#section-2016").hide();
       $("#section-2015").slideDown();
    }
});

score 1 · Answer 2 · answered Feb 12 '16 at 14:03

You could use the

window.name

property. The window object that is always instantiated via Javascript has that property and that stays always the same when loading new documents in the same window. So set the window.name to the page you where coming from. Do that on page load of your index file. In your result file you test that condition on page load and when it's your index file just display your hidden content corresponding to it.

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

I would think, send your params as actual params:

 <ul>
     <li><a id="menu-2016" href="results.html?year=2016">2016</a></li>
     <li><a id="menu-2015" href="results.html?year=2015">2015</a></li>
 </ul>

And parse the params as described here: How can I get query params...

edited May 23 '17 at 11:59

Community

1
1

answered Feb 12 '16 at 14:05

Mirko Pelgrom

91
7

jQuery Navigate to another page and display div hidden

3 Answers3