Show/Hide using JQuery

Posted by Rajnilari2015 under jQuery category on | Points: 40 | Views : 377
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

<script type='text/javascript' src=''></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")) {

//hides the li's with active class and cancel button
if ($(this).hasClass("active")) {
$("ul#tabs li").not(".active").hide();

<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>


<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"/>

Comments or Responses

Login to post response