Question

I apologize if this one will sound too easy for most, so I’m totally shooting an answer here:

Mainly I would like to understand how you bind different JQuery functions to different elements

==========================================
I have a MENU that has 2 links items

   <a id="aLogin" href="???">Login</a>
   <a id="aRegister" href="???">Register</a>

I also have 2 DIVs each one that shows the right elements

<div id="dLogin" class="hide">
  ...elements to login
</div>

<div id="dRegister" class="hide">
  ...elements to register
</div>

I understand that i can change the class from JQuery from “hide” to “show”
but my question is: how can I specify the Login link to execute the right Jquery function (the one that changes the class of the DIV Login to “show”) ??

Answer 1

In the href you just give #

<a id="aLogin" href="#">Login</a>
<a id="aRegister" href="#">Register</a>

Use the jQuery’s click event to bind onclick event to each link.
And the toggleClass to toggle between the hide and show classes

$("#aLogin").click(function(){
    $("#dLogin").toggleClass("hide").toggleClass("show");
    retun false;
}

$("#aRegister").click(function(){
    $("#dRegister").toggleClass("hide").toggleClass("show");
    retun false;
}