Skip to content

Instantly share code, notes, and snippets.

$(".revealTrigger").click(function () {
$($(this).attr("rel")).show();
return false;
});
$(".revealTrigger").click(function () {
$($(this).closest(".revealGroup")).find(".revealTarget").show();
return false;
});
<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>
<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>
form#userLogin {
/* set this up to be hidden on page load */
display: none;
}
/* 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
});
.revealTarget {
/* set this up to be hidden on page load */
display: none;
}
<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 -->
form#userLogin {
/* set this up to be hidden on page load */
display: none;
}