Linking to another page with a jQuery element

Question

The title might sound a little bit confusing because I don't know how to word it but here's my situation.

Lets say I have two pages. One is my home page and the other is a showcase page.

What I would like to accomplish is this. When I click on the Showcase 1 link on the index page I want the browser to go to the showcase page and open up the first showcase automatically. Is this possible?

The home page has a snippet as follows:

<a href="#">Showcase 1</a>
<a href="#">All Showcases</a>

The showcase page has a snippet as follows:

$(document).ready(function() {
  
  $('.showcases').css('display', 'none');
  
  $('#showcase-link-one').click(function() {
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-one').stop(true, true).show('fast');
  });
  
  $('#showcase-link-two').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).show('fast');
  });
  
  $('#showcase-link-three').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).show('fast');
  });

});

ul {
    list-style-type: none;
}

.showcase-link {
    text-decoration: none;
}

.showcase-link:hover { 
    color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="showcase-header">
  <ul>
    <li><a href="#" id="showcase-link-one" class="showcase-link">Showcase One</a></li>
    <li><a href="#" id="showcase-link-two" class="showcase-link">Showcase Two</a></li>
    <li><a href="#" id="showcase-link-three" class="showcase-link">Showcase Three</a></li>
  </ul>
</div>

<div class="showcases" id="showcase-one">
  <p>You Clicked on Showcase One</p>
</div>
<div class="showcases" id="showcase-two">
  <p>You Clicked on Showcase Two</p>
</div>
<div class="showcases" id="showcase-three">
  <p>You Clicked on Showcase Three</p>
</div>

Answer 1

One way to do it is to set the hash in the URL when clicking that link.

<a href="http://example.com/#link-one">Showcase 1</a>

Then with JS you can check the hash with window.location.hash and open the right showcase.

Lets say you save all the clickable showcases in an array

var showcase = ['#link-one', '#link-two', '#link-three'];

$(document).ready(function() {

  $('.showcases').css('display', 'none');

  $('#showcase-link-one').click(function() {
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-one').stop(true, true).show('fast');
  });

  $('#showcase-link-two').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).show('fast');
  });

  $('#showcase-link-three').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).show('fast');
  });

  if($.inArray(window.location.hash, showcase)) // check to see if it's a showcase 
     $( '#showcase-' + window.location.hash.replace('#') ).trigger('click')

});

Like this you can send the information in you link and use it on the next page.

Answer 2

If you change the code to the following showcase one will run when the page loads.

$(document).ready(function() {

  $('.showcases').css('display', 'none');

  $('#showcase-link-one').click(function() {
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-one').stop(true, true).show('fast');
  });

  $('#showcase-link-two').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).show('fast');
  });

  $('#showcase-link-three').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).show('fast');
  });

  $('#showcase-link-one').trigger('click');
});