UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery toggle to show and hide a control in single event

Demo and Examples for jQuery toggle to hide and show control in same control event.

by athilmp


Posted on 01 Jan 0001 Category: jQuery Views: 31

Edited on 01 Jan 0001


Here I am going to show how to use 'jQuery toggle', Where jQuery toggle is using for hiding the control if the control is visible and showing the control if the control is hidden.

DEMO

toggle with ID

$("#txt1").toggle();

Where 'txt1' is the id of the control and Id will start with #. 

 

toggle with class name 

Where ".classname" and class name will start with dot (.) symbol 

 

toggle with speed

Where 300 is the time limit. 

 

 $(".classnamespeed").toggle(300);

Where 300 is the speed. 

Full Demo Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>Demo for jQuery toggle </h1>

    <input type="text" id="txt1"/>
    <button type="submit" onclick ="togglewithid();">toggle with id </button> <br/>

    <input type="text" class="clasname" />
    <button type="submit" onclick ="togglewithclass();"> toggle with class </button> </br>

    <input type="text" class="classnamespeed"/>
    <button type="submit" onclick ="togglewithspeed();">toggle with speed </button> </br>
</body>

     <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script>
        function togglewithid()
        {
            $("#txt1").toggle();
        }
        function togglewithclass()
        {
            $(".clasname").toggle();
        }
        function togglewithspeed()
        {
            $(".classnamespeed").toggle(300);
        }
        </script>
  
</html>

 



Leave a Comment: