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: 952

Edited on 03 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: