{"id":298,"date":"2015-01-15T09:51:49","date_gmt":"2015-01-15T09:51:49","guid":{"rendered":"http:\/\/www.thespidercloud.com\/?p=146"},"modified":"2015-01-15T09:51:49","modified_gmt":"2015-01-15T09:51:49","slug":"basic-demo-toggle-display-with-javascript","status":"publish","type":"post","link":"https:\/\/frowningbear.com\/codebase\/2015\/01\/15\/basic-demo-toggle-display-with-javascript\/","title":{"rendered":"Basic Toggling with javascript"},"content":{"rendered":"<p>If your not familiar with natural javascript and your only used to using a library like jQuery, then you might be surprised to learn that javascript doesn&#8217;t have a predefined toggle function that you can just call up when you want. You need to create your own before you can use it. Here is a bare bones demonstration of toggling in plain old ordinary javascript.<\/p>\n<p><!--more--><\/p>\n<p>This is about as simple as it can get. I&#8217;ll add comments soon. Click the button to toggle the paragraph beneath. You can copy the basic html source in case you want to play around with it<\/p>\n<p><button id=\"toggler\" type=\"button\" onclick=\"toggle('para')\">Hide paragraph<\/button><\/p>\n<p id=\"para\">I am a paragraph of text. You can display me or hide me by clicking on the button. Don&#8217;t believe me? Go ahead and try it then. Go on, I dare you to. I&#8217;ve got to say something to make this look like a sizable enough paragraph for you to show or hide at your whimsy! Are we even up to four lines yet? I say a decent paragraph should probably contain at least four lines as a bare minimum, don&#8217;t you think?<\/p>\n<pre class=\"lang:default decode:true \" title=\"Simple Toggle\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h1&gt;Toggler&lt;\/h1&gt;\n\n&lt;button id=\"toggler\" type=\"button\" onclick=\"toggle('para')\"&gt;Hide \nparagraph&lt;\/button&gt;\n\n&lt;p id=\"para\"&gt;I am a paragraph of text. You can display me or hide \nme by clicking on the button.&lt;\/p1&gt;\n\n&lt;script&gt;\nfunction toggle( targetId ){\n    var button = document.getElementById(\"toggler\");\n\tvar target = document.getElementById( targetId );\n    if (target.style.display == \"none\") {\n        target.style.display = \"\";\n        button.innerHTML = \"Hide paragraph\";\n    } else {\n        target.style.display = \"none\";\n        button.innerHTML = \"Show paragraph\";\n    }\n}\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Here&#8217;s the javascript all by its lonesome so I can add plenty of comments.<\/p>\n<pre class=\"lang:default decode:true \" title=\"The code\">function toggle( targetId ){\n    var button = document.getElementById(\"toggler\");\n\tvar target = document.getElementById( targetId );\n    if (target.style.display == \"none\") {\n        target.style.display = \"\";\n        button.innerHTML = \"Hide paragraph\";\n    } else {\n        target.style.display = \"none\";\n        button.innerHTML = \"Show paragraph\";\n    }\n}\n\/\/ comments coming soon!\n<\/pre>\n<p><script>\nfunction toggle( targetId ) {\n    var button = document.getElementById(\"toggler\");\n    var target = document.getElementById( targetId );\n    if (target.style.display == \"none\") {\n        target.style.display = \"\";\n        button.innerHTML = \"Hide paragraph\";\n    } else {\n        target.style.display = \"none\";\n        button.innerHTML = \"Show paragraph\";\n    }\n}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your not familiar with natural javascript and your only used to using a library like jQuery, then you might be surprised to learn that javascript doesn&#8217;t have a predefined toggle function that you can just call up when you want. You need to create your own before you can use it. Here is a &hellip; <a href=\"https:\/\/frowningbear.com\/codebase\/2015\/01\/15\/basic-demo-toggle-display-with-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Basic Toggling with javascript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[25,44],"class_list":["post-298","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-demo","tag-toggle"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":0,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"wp:attachment":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}