Jump to section of page regarding to hashtag

Question

Here is the thing

I have two div elements which I want only one of them be displayed and the other be hidden based on following situation:

The first div is a intro page with a button to hide first div and show second div.Second div is the main content of the page.

If user comes with a url that has no hashtag the first div will be shown(Intro) but there is possibility that the user comes with a hashtag in url .In this case I want to jump to second div and ignore intro

<div id="first-div">
    <!--intro section-->
    <button>Show details</button>
</div>
<div id="second-div" style="display:none">
    <!--Details-->
    <div id="description"></div>
    <div id="comments"></div>
</div>

<script>
    $(document).ready(function(){
        $('button').on('click',function(){
            $(this).parent().hide();
            $('#second-div').show();
        });
    });
</script>

So the question is how can I handle hashtag in url with JQuery?Any idea?

Thanks in advance

See answer here: http://stackoverflow.com/questions/298503/how-can-you-check-for-a-hash-in-a-url-using-javascript — Gregg, Oct 08 '13 at 20:08

score 3 · Answer 1 · edited Oct 08 '13 at 20:14

3

You need to check location.hash, it returns you the part of the URL that is after the #.

$(document).ready(function(){
  if (location.hash != '') {
    $('#first-div').show();
    $('#second-div').hide();
  } 
}

edited Oct 08 '13 at 20:14

codedme

616
3
12

answered Oct 08 '13 at 20:08

RafH

4,504
2
23
23

score 2 · Accepted Answer · answered Oct 08 '13 at 20:08

2

You can use the location.hash property

if (window.location.hash == "#notIntro") {
  // do here
}

answered Oct 08 '13 at 20:08

Anthony Atkinson

3,101
3
20
22

score 2 · Answer 3 · answered Oct 08 '13 at 20:13

2

if(window.location.hash) {
    $('#first-div').hide();
    $('#second-div').show();
} 
else {
    $('#first-div').show();
    $('#second-div').hide();
}

answered Oct 08 '13 at 20:13

lomas09

1,114
4
12
28

Jump to section of page regarding to hashtag

3 Answers3