UncleCoder.com

UncleCoder.com

Free programming examples and instructions

show and hide control in single event - jQuery

Demo and code for how to show and hide an HTML control in single event using jQuery

by Athil


Posted on 22 Jun 2019 Category: jQuery Views: 1541


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:


Click here to register

Popular articles