jQuery when pointed to a link should show a div that's hidden by default

Question

I have a page where there are a few divs hidden by default. I would like to be able to point users to a link where it would show the divs.

ex. https://app.emailsmsmarketing.com/login

Users are able to click "Register" which hides the login div and shows the register div. What I'm trying to accomplish is basically adding a link to the main site from where users will be able to access the registration form by default (using jQuery only).

ex. https://app.emailsmsmarketing.com/login#!register (or something like that)

Basically what I'm asking is:

a) is is possible to do this
b) if so, how?

I'm not sure if this makes sense to anyone. I appreciate any help provided.

Answer 1

You can examine the document.location property during ready event:

$(document).ready(function() {
  if (document.location.indexOf('#login') > -1)
    $("#login").show();
});

Answer 2

You probably looking for this: Anchor-based URL navigation with jQuery

var myUrl = document.location.toString();
if (myUrl.match('#')) { // the URL contains an anchor

  var myAnchor = '#' + myUrl.split('#')[1];
  $('#login').hide();
  $('#register').show();
}

Answer 3

Well sure, just set a class or id or something on your link, like so:

<a href="#" class="register"> Register! </a>

Then do this in jQuery

$("a.register").click(function() { 
    $("#logindiv").hide()
    $("#registerdiv").show();
    return false; // prevents the default behavior of the link, ie following it
});

Where registerdiv is the ID of your hidden div etc.