{"id":714,"date":"2014-04-19T09:47:08","date_gmt":"2014-04-19T13:47:08","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/programming-blog\/?p=714"},"modified":"2014-05-16T07:44:26","modified_gmt":"2014-05-16T11:44:26","slug":"hideshow-using-javascript","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/programming-blog\/hideshow-using-javascript\/","title":{"rendered":"Hide\/Show using JavaScript"},"content":{"rendered":"<p><strong>To hide the Div : style=&#8221;display:none&#8221;; <\/strong><\/p>\n<p><strong>To visible the Div : style=&#8221;display:block&#8221;;<\/strong><\/p>\n<p><script>\/\/ <![CDATA[\nfunction showdiv() { if(document.getElementById('child').checked) { document.getElementById('adu').style.display = \"block\"; } else { document.getElementById('adu').style.display = \"none\"; } if(document.getElementById('adult').checked) { document.getElementById('adu').style.display = \"none\"; }  }\n\/\/ ]]><\/script><\/p>\n<p>[php]<br \/>\n&lt;html&gt;&lt;head&gt;&lt;script type=&quot;text\/javascript&quot;&gt;<br \/>\nfunction showdiv()<br \/>\n{<br \/>\nif(document.getElementById(&#8216;child&#8217;).checked)<br \/>\n{<br \/>\ndocument.getElementById(&#8216;adu&#8217;).style.display = &quot;block&quot;;<br \/>\n}<br \/>\nelse<br \/>\n{<br \/>\ndocument.getElementById(&#8216;adu&#8217;).style.display = &quot;none&quot;;<br \/>\n}<br \/>\nif(document.getElementById(&#8216;adult&#8217;).checked)<br \/>\n{<br \/>\ndocument.getElementById(&#8216;adu&#8217;).style.display = &quot;none&quot;;<br \/>\n}<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;table border=&quot;0&quot;&gt;<br \/>\n&lt;tbody&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Member Type&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input id=&quot;adult&quot; onclick=&quot;showdiv();&quot; type=&quot;radio&quot; name=&quot;member&quot; value=&quot;Adult&quot; \/&gt;<br \/>\n&lt;input id=&quot;child&quot; onclick=&quot;showdiv();&quot; type=&quot;radio&quot; name=&quot;member&quot; value=&quot;Child&quot; \/&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<\/p>\n<p>&lt;div id=&quot;adu&quot; style=&quot;display:none&quot;&gt;<br \/>\n&lt;tr&gt;&lt;td&gt;Name&lt;\/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/tbody&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<p>[\/php]<\/p>\n<p><strong>Output:<\/strong><\/p>\n<p>When you Click the Adult , you will not see the text box below.<\/p>\n<p>When you click the child, the below text box will be visible.<\/p>\n<table width=\"100%\" cellspacing=\"1\" cellpadding=\"4\" bgcolor=\"\">\n<tbody>\n<tr>\n<td align=\"right\" width=\"200\" height=\"38\"><span style=\"color: #000000;\">Member Type<\/span><\/td>\n<td align=\"left\"><span style=\"color: #000000;\"><input id=\"adult\" name=\"member\" type=\"radio\" value=\"Adult\" \/>\u00a0<\/span><span style=\"color: #ffffff; font-size: small;\"><span style=\"color: #000000;\">Adult<\/span><br \/>\n<\/span><span style=\"color: #000000;\"><input id=\"child\" name=\"member\" type=\"radio\" value=\"Child\" \/>\u00a0<span style=\"font-size: small;\">Child<\/span><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table width=\"100%\" cellspacing=\"1\" cellpadding=\"4\" bgcolor=\"\">\n<tbody>\n<tr>\n<td align=\"right\" width=\"200\" height=\"38\">Name<\/td>\n<td align=\"left\">\u00a0\u00a0<input id=\"parname\" name=\"parname\" type=\"text\" value=\"\" \/>\u00a0*<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To hide the Div : style=&#8221;display:none&#8221;; To visible the Div : style=&#8221;display:block&#8221;; [php] &lt;html&gt;&lt;head&gt;&lt;script type=&quot;text\/javascript&quot;&gt; function showdiv() { if(document.getElementById(&#8216;child&#8217;).checked) { document.getElementById(&#8216;adu&#8217;).style.display = &quot;block&quot;; } else { document.getElementById(&#8216;adu&#8217;).style.display = &quot;none&quot;; } if(document.getElementById(&#8216;adult&#8217;).checked) { document.getElementById(&#8216;adu&#8217;).style.display = &quot;none&quot;; } } &lt;\/script&gt; &lt;\/head&gt; &lt;table border=&quot;0&quot;&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Member Type&lt;\/td&gt; &lt;td&gt; &lt;input id=&quot;adult&quot; onclick=&quot;showdiv();&quot; type=&quot;radio&quot; name=&quot;member&quot; value=&quot;Adult&quot; \/&gt; &lt;input id=&quot;child&quot; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[150,13],"tags":[],"class_list":["post-714","post","type-post","status-publish","format-standard","hentry","category-javascript-2","category-php"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts\/714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/comments?post=714"}],"version-history":[{"count":15,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts\/714\/revisions"}],"predecessor-version":[{"id":751,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/posts\/714\/revisions\/751"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/media?parent=714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/categories?post=714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/programming-blog\/wp-json\/wp\/v2\/tags?post=714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}