Jquery Show/Hide example

Rajnilari2015
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 900 red flag

This article will demonstrate a way of Jquery Show/Hide.


 Download source code for Jquery Show/Hide example

Recommendation
Read Masking in JQuery before this article.

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.

Recommendation
Read Map and Reduce function of Javascript after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)