UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery toggle

code and demo for jQuery toggle. show and hide control in single event

by Athil


Posted on 13 May 2017 Category: jQuery Views: 632

Edited on 03 Jun 2017



DEMO

Hi, Here I am going to show to show/hide an HTML control in a single event using the toggle() method.

By using control type

 $("h1").toggle();

By using control id

$("#control-id").toggle();

By using class name

$(".class-name").toggle();

Toggle with speed time

$("h1").toggle(100);

 

Full 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>

 

Related Posts

 

jQuery hide a control

jQuery show hidden control

 



Leave a Comment:


Advertisement