Show/Hide tab using Jquery CSS [Resolved]

Posted by Krishnasamy2008 under jQuery on 11/23/2015 | Points: 10 | Views : 680 | Status : [Member] | Replies : 3
Hi Friends,

I have done jquery css show/hide tab but i am facing one problem to reselect based on user button click action.Cancel means need to do tab selection Home and search means need to do selection Serach tab.

<script type="text/javascript">

$(document).ready(function () {

$("ul#tabs li").click(function (e) {
if (!$(this).hasClass("active")) {
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
}
});


});

<div id="divMenuTab">
<ul id="tabs">
<li class="active"><a href="javascript:;" id="aTabDocuments" > <span></span>Home</a></li>
<li><a href="javascript:;" 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;" onclick="return ShowHideTab('Cancel');"/>
<input type="submit" class="btnPrimary" value="Search" id="btnSearch" name="btnSearch" onclick="return ShowHideTab(‘sEARCH’);"/>
</div>

Thanks,
Krishna.K




Responses

Posted by: Rajnilari2015 on: 11/23/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
The below piece of code assumes that if you click on Home link, then the Search link and Search button will be hidden. likewise, if you click on the Search link, the Home link and Cancel button will be hidden. is this what you are looking for?

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


--
Thanks & Regards,
RNA Team

Krishnasamy2008, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rajnilari2015 on: 11/23/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 25

Up
0
Down
This piece of code will toggle the class (Active) between the two li's

$(document).ready(function () {


$("ul#tabs li").click(function (e) {

$('ul#tabs li').toggleClass('active');

});
});


--
Thanks & Regards,
RNA Team

Krishnasamy2008, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rajnilari2015 on: 11/23/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 25

Up
0
Down
But most likely, your question is if the Cancel button is clicked, then Home link/tab will be active. When Search button is clicked then link/tab will be active. In that case you can try

<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(){
$('#btnSearchCancel').click(function(){

$("ul#tabs li").not(".active").hide();
$("ul#tabs li.active").show();
$('#aTabDocuments').find('span').trigger('click');
});
$('#btnSearch').click(function(){

$("ul#tabs li").not(".active").show();
$("ul#tabs li.active").hide();
$('#aTabSearch').find('span').trigger('click');
});
});
</script>
<body>

<div id="divMenuTab">
<ul id="tabs">
<li class="active"><a href="javascript:alert('test1')" id="aTabDocuments" > <span></span>Home</a></li>
<li><a href="javascript:alert('test2');" 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>


--
Thanks & Regards,
RNA Team

Krishnasamy2008, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response