This article will demonstrate a way of Jquery Show/Hide.
Introduction
Let say we have two hyperlinks namely Link1,Link2. And two buttons namely LinkButton1 and LinkButton2. If we click on LinkButton1 , then Link1 hyperlink will be only visible and the Link2 link will become hidden while alert box message in the Link1 hyperlink will trigger.Likewise, if we click on LinkButton2, then Link2 hyperlink will be only visible and the Link1 link will become hidden while alert box message in the Link2 hyperlink will trigger.We need to achieve the task using JQuery.
Environment Setup
Let us first make the design
<html>
<head>
<body>
<div id="divLinkGroup">
<ul id="linkGroups">
<li class="myClass"><a href="javascript:alert('Hello from Link1')" id="aLink1"><span></span>Link1</a></li>
<li><a href="javascript:alert('Hello from Link2');" id="aLink2"><span></span>Link2</a></li>
</ul>
</div>
<div id="divSearchTab">
<input type="button" value="LinkButton1" id="LinkButton1" name="LinkButton1"/>
<input type="button" value="LinkButton2" id="LinkButton2" name="LinkButton2"/>
</div>
</body>
</html>
The output of the design will be
Using the Code
Now let us look into the code
<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(){
$('#LinkButton1').click(function(){
$("ul#linkGroups li").not(".myClass").hide();
$("ul#linkGroups li.myClass").show();
$('#aLink1').find('span').trigger('click');
});
$('#LinkButton2').click(function(){
$("ul#linkGroups li").not(".myClass").show();
$("ul#linkGroups li.myClass").hide();
$('#aLink2').find('span').trigger('click');
});
});
</script>
<body>
<div id="divLinkGroup">
<ul id="linkGroups">
<li class="myClass"><a href="javascript:alert('Hello from Link1')" id="aLink1"><span></span>Link1</a></li>
<li><a href="javascript:alert('Hello from Link2');" id="aLink2"><span></span>Link2</a></li>
</ul>
</div>
<div id="divSearchTab">
<input type="button" value="LinkButton1" id="LinkButton1" name="LinkButton1"/>
<input type="button" value="LinkButton2" id="LinkButton2" name="LinkButton2"/>
</div>
</body>
</html>
Code Explanation
On the initial page load, we have
First of all we are selecting the "LinkButton1" using the JQuery Id selector.Then invoking the Click function on that, we are hiding those li which does not have the class attribute "myClass" by using not(".myClass").Once done, then we are hiding that li by using the hide() function.
$("ul#linkGroups li").not(".myClass").hide();
We can figure out that
style="display: none"
has been set and that caused the "Link2" to hide
The very next line
$("ul#linkGroups li.myClass").show();
is selecting those li that has the class attribute "myClass" and once found it is kept alive.
Finally, the trigger('click') does the job by triggering the Link1 hyperlink's attribute which caused the alert message to fire
Now we are selecting the "LinkButton2" using the JQuery Id selector.Then invoking the Click function on that, we are displaying those li which does not have the class attribute "myClass" by using not(".myClass").Once done, then we are hiding those li by using the hide() function which has the class attribute "myClass".Finally, the trigger('click') does the job by triggering the Link2 hyperlink's attribute which caused the alert message to fire
Observe the behaviour of the style attribute
Reference
ID Selector
trigger()
Conclusion
Hope this article will be helpful for those who needs help in show and hide features of JQuery. Thanks for reading. Zipped file is attached.