SevenZark

$(".revealTrigger").click(function () {
   $($(this).closest(".revealGroup")).find(".revealTarget").show();
   return false;
});

SevenZark

$(".revealTrigger").click(function () {
   $($(this).attr("rel")).show();
   return false;
});

SevenZark

/* The first line below just binds a click event function 
to an object obtained by writing a CSS-style selector - 
which, by the way, is at the heart of jQuery's usefulness */
$("#revealLogin").click(function () {
   $("form#userLogin").show();
   return false; // This just keeps the browser from jumping to the top
});

SevenZark

.revealTarget {
   /* set this up to be hidden on page load */
   display: none;
}

SevenZark

form#userLogin {
   /* set this up to be hidden on page load */
   display: none;
}

SevenZark

form#userLogin {
   /* set this up to be hidden on page load */
   display: none;
}

SevenZark

<div class="revealGroup"> <!-- Element Group 1 -->
   <a class="revealTrigger" href="#">Log In</a>
   <form class="revealTarget" id="userLogin" ...>
      <label for="username">Username:</label>
      <input id="username" type="text" />
      <label for="password">Password:</label>
      <input id="password" type="password" />
   </form>
</div>
<div class="revealGroup"> <!-- Element Group 2 -->

SevenZark

<a id="revealLogin" href="#">Log In</a>
<form id="userLogin" ...>
   <label for="username">Username:</label>
   <input id="username" type="text" />
   <label for="password">Password:</label>
   <input id="password" type="password" />
</form>

SevenZark

<a class="revealTrigger" href="#" rel="form#userLogin">Log In</a>
<form id="userLogin" ...>
   <label for="username">Username:</label>
   <input id="username" type="text" />
   <label for="password">Password:</label>
   <input id="password" type="password" />
</form>