{"id":3200,"date":"2017-12-05T14:29:41","date_gmt":"2017-12-05T19:29:41","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?p=3200"},"modified":"2020-02-26T09:23:32","modified_gmt":"2020-02-26T14:23:32","slug":"how-to-use-jquery-to-show-hide-a-form-on-click","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/","title":{"rendered":"How to use jQuery to Show\/Hide a Form on Click"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">You can use jQuery to show or hide a form on click. The easiest way to do this is to use the toggle effect.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/pairdocs\/3bxq1s6a\/20\/embedded\/\" width=\"100%\" height=\"300\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">This is an interactive code display that shows you the HTML, CSS, jQuery, and a demo of the output.<\/span><\/p>\n<h3>Setting Up HTML for Toggle<\/h3>\n<p><span style=\"font-weight: 400;\">The first step is to create an HTML form and button.<\/span><\/p>\n<pre class=\"prettyprint\"><span style=\"font-weight: 400;\">&lt;button type=\"button\" <\/span><span style=\"font-weight: 400; color: #ff0000;\">id=\"formButton\"<\/span><span style=\"font-weight: 400;\">&gt;Toggle Form!&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;form <\/span><span style=\"font-weight: 400; color: #ff0000;\">id=\"form1\"<\/span><span style=\"font-weight: 400;\">&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;b&gt;First Name:&lt;\/b&gt; &lt;input type=\"text\" name=\"firstName\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;b&gt;Last Name: &lt;\/b&gt;&lt;input type=\"text\" name=\"lastName\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0<\/span> <span style=\"font-weight: 400;\">&lt;button type=\"button\" id=\"submit\"&gt;Submit&lt;\/button&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/form&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">The form and button should have distinguishing classes or IDs that gives jQuery the ability to call it out specifically. In the example above, the button that will toggle the form has an ID of \u201cformButton\u201d and the form has an ID of \u201cform1.\u201d<\/span><\/p>\n<h3>Setting Up CSS for Toggle<\/h3>\n<p><span style=\"font-weight: 400;\">In the CSS, make sure you set the form to:<\/span><\/p>\n<pre class=\"prettyprint\"><span style=\"font-weight: 400;\">display:none;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">This will make sure the form is not visible until the button is first clicked. In our example, it would be: <\/span><\/p>\n<pre class=\"prettyprint\"><span style=\"font-weight: 400;\">#form1 {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">display:none;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3>Setting up jQuery for Toggle<\/h3>\n<p><span style=\"font-weight: 400;\">In the jQuery, you need to set up the button to toggle the form to show and hide. See the example below: <\/span><\/p>\n<pre class=\"prettyprint\"><span style=\"font-weight: 400;\">$(\"#formButton\").click(function(){<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#form1\").toggle();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0});<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">In the example, the ID of the button, \u201cformButton,\u201d is called and when it is clicked, it toggles the form. The form is called by its ID \u201cform1.\u201d When the button is clicked, the form\u2019s visibility will toggle to display or hide.<\/span><\/p>\n    \t\t<div class=\"hts-messages hts-messages--info    \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tjQuery is an open-source software permissive under an MIT license. jQuery is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for jQuery. Please note that there are many levels of javascript libraries available. Please consult with your IT professional for advice and guidance on an appropriate library. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for jQuery's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t\n","protected":false},"excerpt":{"rendered":"<p>You can use jQuery to show or hide a form on click. The easiest way to do this is to use the toggle effect. This is an interactive code display that shows you the HTML, CSS, jQuery, and a demo of the output. Setting Up HTML for Toggle The first&#8230;<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[32],"ht-kb-tag":[187],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use jQuery to Show\/Hide a Form on Click - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"You can use jQuery to show or hide a form on click. Find out how to create a form that will show or hide on click in this tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use jQuery to Show\/Hide a Form on Click - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"You can use jQuery to show or hide a form on click. Find out how to create a form that will show or hide on click in this tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-26T14:23:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/\",\"name\":\"How to use jQuery to Show\/Hide a Form on Click - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2017-12-05T19:29:41+00:00\",\"dateModified\":\"2020-02-26T14:23:32+00:00\",\"description\":\"You can use jQuery to show or hide a form on click. Find out how to create a form that will show or hide on click in this tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use jQuery to Show\/Hide a Form on Click\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use jQuery to Show\/Hide a Form on Click - Knowledge Base - Pair Networks","description":"You can use jQuery to show or hide a form on click. Find out how to create a form that will show or hide on click in this tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/","og_locale":"en_US","og_type":"article","og_title":"How to use jQuery to Show\/Hide a Form on Click - Knowledge Base - Pair Networks","og_description":"You can use jQuery to show or hide a form on click. Find out how to create a form that will show or hide on click in this tutorial.","og_url":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2020-02-26T14:23:32+00:00","twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/","url":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/","name":"How to use jQuery to Show\/Hide a Form on Click - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2017-12-05T19:29:41+00:00","dateModified":"2020-02-26T14:23:32+00:00","description":"You can use jQuery to show or hide a form on click. Find out how to create a form that will show or hide on click in this tutorial.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-show-hide-a-form-on-click\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"How to use jQuery to Show\/Hide a Form on Click"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3200"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=3200"}],"version-history":[{"count":9,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3200\/revisions"}],"predecessor-version":[{"id":7429,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3200\/revisions\/7429"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=3200"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=3200"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=3200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}