UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery toggle() to show and hide a control in single event

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

by Athil


Posted on 23 Jun 2019 Category: jQuery Views: 146

Edited on 23 Jun 2019


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: