CODEWITHSUNDEEP
javascriptjqueryhtml
Andrew Hill
Andrew Hill

Reputation: 2253

Display div on page only if coming from specific link

I have a seemingly trivial question whose answer eludes me.

I have two pages.

Page one has two links:

<a class="first-link" href="page-two.html">Hidden content. </a>
<a class="second-link" href="page-two.html">Shown content. </a>

Page two has a heading and some content:

<div class='content'>
  <h3>Heading goes here. </h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis elementum erat, ut sollicitudin ante. 
  </p>
</div>

Using only jQuery or Native JavaScript:

When I click on the first link on page one, I would like page two to load with the div (class='content') hidden.

When I click on the second link, I would like page two to load with the div (class=content') revealed.

If anyone could point me in the right direction I would appreciate it. Being new to JS/jQuery I find it hard to put something like this into viable Google query.

Thanks all

Upvotes: 1

Views: 2403

Answers (1)

Josh Brule
Josh Brule

Reputation: 116

You need to pass a parameter to the second page. Easiest way would be to use either a querystring or an anchor. On page-two.html you will need to inspect the window.location and show the content accordingly.

For example. Set your second link to this <a class="second-link" href="page-two.html#showcontent">Expanded content. </a>

Then on page-two.html include the following script

$(function(){
   if(window.location.hash === "#showcontent")
   $("div#hiddencontent").show();
});

Upvotes: 2

Related Questions