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


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


By using control id


By using class name


Toggle with speed time



Full code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <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>

     <script type="text/javascript" src="js/jquery.min.js" ></script>
        function togglewithid()
        function togglewithclass()
        function togglewithspeed()

Related Posts

jQuery hide a control

jQuery show hidden control

Leave a Comment: