Show Div using URL

Question

Okay so I have the following:

<div class="login">
    <div class="close_login"></div>

    <form name="loginform" id="loginform" action="<?php echo site_url(); ?>/wp-login.php"        
 method="post"  class="login-form">
    <ul class="login_form">
        <li><input type="text" name="log" id="user_login" class="input" value="" 
                        size="20" placeholder="Username"/></li>

        <li>
        <input type="password" name="pwd" id="user_pass" class="input" 
                        value="" size="20" placeholder="Password"/>
    </li>

        <li><input type="submit" name="wp-submit" id="wp-submit" class="button-
                        primary" value="Log In" />
        <input type="hidden" name="redirect_to" 
                       value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
                       </li>
        </ul>

    </form>
            </div>

and the following jQuery

<script>

 $( document ).ready(function() {
    $("#menu-item-login").click(function () {
    $(".signup").slideUp();
    $(".login").slideDown();
    $(".close_login").slideDown();
});
  $(".close_login").click(function () {
    $(".login").slideUp();
    $(".close_login").slideUp();
});
  $("#wp-submit").click(function () {
    $(".login").slideUp();
    $(".close_login").slideUp();
});
   });

</script>

Now the following will show login after clicking on button (not in example) Now how can I get login to automatically appear if I add #login to the end of the url?

Aled

Answer 1 · 2014-02-18T08:25:41Z

February 18, 2014 8:25am

I'm not entirely sure how much 'answering' is meant to be done on the forums, or if we're just meant to guide you in the correct direction However, documents.location.href would be the URL of the page (www.mysite.com), and indexOf checks the location of a give phrase in the string (I believe it was discussed in the validation video). It returns -1 on failure, and the location on success (0-9)

Your code should then be

if(document.location.href.indexOf('#login') > -1) {
// It exists in the URL, continue
}

Answer 2 · 2014-02-10T20:07:05Z

February 10, 2014 8:07pm

You could use indexOf() on window.location.href, to see if the term "#login" exists in the URL. Then show and hide content depending on the result of that.

Answer 3 · 2014-02-18T00:03:33Z

February 18, 2014 12:03am

Thanks for the reply :) I have no idea how to do that? Could you help me?

Answer 4 · 2014-02-23T01:26:42Z

February 23, 2014 1:26am

Thanks for that :)

Welcome to the Treehouse Community

Looking to learn something new?

Aled Evans

Aled Evans

Show Div using URL

4 Answers

Daniel Chenery

Daniel Chenery

Daniel Chenery

Daniel Chenery

Aled Evans

Aled Evans

Aled Evans

Aled Evans