How do I show my hidden div using this jquery code?

Question

I have a jquery code to display one div and hide the rest dynamically on the same page. And im having a little problem, when i only try to acess directly(via url) to the login page index.php#login im sent back to the main page index.php#home

This happens because the login as to be set as hidden. So is there anyway i can go around this?

    $('#w').live('click', function(){

        $('#b').css('display','none');
        $('#a').css('display','block');
    });

    $('#x').live('click', function(){
        $('#a').css('display','none');
        $('#b').css('display','block');
    });

<li><a href="#home" id=w>Home</a></li>
<li><a href="#login" id=x>Login</a></li>

<div id=b style="display:none;">

// Login

</div>

<div id=a>

// Main content

</div>

Ps: Sorry for my bad english

From [jQuery API](http://api.jquery.com/live/): "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers." — crackmigg, Mar 19 '13 at 22:23

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I think you can do something like:

$(document).ready(function() {

  // set all event binding
  $('body').on('click', 'a[href="#home"], a[href="#login"]', function() {
       $('#a, #b').toggle(0);
  });

  // try to fire appropriate event using hash value

  var hash = window.location.hash; // return:  #home  OR #login
  $('a[href="'+ hash +'"]').click();

});

May be you can get more from here.

Note

But not sure, why you need live event. live event needs for bind event to dynamically loaded content ie. element(s) that append to DOM after page load.

If you really need a live delegate event then instead of live use .on() for that cause live is deprecated and try to use jQuery latest version.

If you think you don't need live then simplify the event handler like:

$('a[href="#home"], a[href="#login"]').on('click', function() {
    $('#a, #b').toggle(0);
});

How do I show my hidden div using this jquery code?

1 Answers1

Note