UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery show and hide control in single event

Code and example for jQuery toggle. How to show and hide control in sigle event.

by Athil


Posted on 09 May 2017 Category: jQuery Views: 1244

Edited on 04 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