I am facing a situation where I have two web pages named index and results. The results.html page contains some hidden divs with the CSS property set to display: none. My goal is to navigate from the index page using a navigation menu and open the results page while displaying the previously hidden div. The jQuery implementation works perfectly on the results.html page, but I am unsure how to trigger this function from the index page.
Index Page Navigation Menu:
<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 Page Content:
<section id="2016">Content for 2016</section>
<section id="2015">Content for 2015</section>
Associated CSS Styling:
#section-2015, #section-2016 {
display: none;
}
jQuery Implementation:
$(document).ready(function () {
$("#menu-2016").click(function () {
$("#section-2016").slideDown();
$("#section-2015").slideUp();
});
$("#menu-2015").click(function () {
$("#section-2015").slideDown();
$("#section-2014").slideUp();
});
});