Let say we have two hyper links Home and Search. And two buttons Home and Search.If we click on Home link, then the Search link and Search button will be hidden. Likewise, if we click on the Search link, the Home link and Cancel button will be hidden.The below code will do that
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul#tabs li").click(function () {
//hides the li's with active class and cancel button
if (!$(this).hasClass("active")) {
$("ul#tabs li.active").hide();
$('#btnSearchCancel').hide();
}
//hides the li's with active class and cancel button
if ($(this).hasClass("active")) {
$("ul#tabs li").not(".active").hide();
$('#btnSearch').hide();
}
});
});
</script>
<body>
<div id="divMenuTab">
<ul id="tabs">
<li class="active"><a href="javascript:void(0);" id="aTabDocuments" > <span></span>Home</a></li>
<li><a href="javascript:void(0);" id="aTabSearch"><span></span>Search</a></li>
</ul>
</div>
<div id="divSearchTab">
<input type="button" value="Cancel" id="btnSearchCancel" name="btnSearchCancel" class="btnPrimary" style="width: 60px;"/>
<input type="submit" class="btnPrimary" value="Search" id="btnSearch" name="btnSearch"/>
</div>
</body>
</html>