{"id":6262,"date":"2022-02-21T14:55:42","date_gmt":"2022-02-21T14:55:42","guid":{"rendered":"https:\/\/davelevy.info\/wiki\/?p=6262"},"modified":"2026-02-19T00:41:27","modified_gmt":"2026-02-19T00:41:27","slug":"buttons","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n<p>This article was my first article to prove a toggle on display\/hide. You can see the widget below\/overleaf. &#8230;<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>How to toggle the show and display of text. Here&#8217;s my first attempt. It <a href=\"https:\/\/www.w3schools.com\/howto\/howto_js_toggle_hide_show.asp\">came from w3schools<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;script&gt; function maxdisplay() {\n  var x = document.getElementById(\"questions\");\n  if (x.style.display === \"none\") {\n    x.style.display = \"block\";\n  } else {\n    x.style.display = \"none\";\n  }\n}\n&lt;\/script&gt;\n&lt;button  onclick=\"maxdisplay()\"&gt;View Questions&lt;\/button&gt;\n&lt;div id=\"questions\"&gt;The quick brown fox ....&lt;\/div&gt;\n<\/pre>\n\n\n\n<p>The function has a name, which hard codes its application to the div id and the button. It looks like it would be possible to <a href=\"https:\/\/css-tricks.com\/snippets\/javascript\/showhide-element\/\">parameterise<\/a> it. This page now has four versions of this script, it is parameterised, and tuned to work with an invisible and visible default position. Experimentation suggests that this is best written as a != test, check the code on this page, button 6, paragraph name 5, function <code>toggle_text4<\/code> which looks like this,<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function toggle_text(id) { \n    var e = document.getElementById(id);\n    if(e.style.display != 'block') \n        e.style.display = 'block'; \n    else e.style.display = 'none'; }<\/pre>\n\n\n\n<p><button onclick=\"myFunction()\">Click Me<\/button><\/p>\n\n\n\n<p><script>function myFunction() {<br \/>\n  var x = document.getElementById(\"myDIV\");<br \/>\n  if (x.style.display === \"none\") {<br \/>\n    x.style.display = \"block\";<br \/>\n  } else {<br \/>\n    x.style.display = \"none\";<br \/>\n  }<br \/>\n}<br \/>\n<\/script><\/p>\n\n\n\n<div id=\"myDIV\" style=\"display: none;\">\n<p>This is my DIV element, using the button hides or displays this text.<\/p>\n<\/div>\n\n\n\n<p>The default of hidden is set by using a style statement with the property &#8220;display:none;&#8221; on the text to be toggled which is encapsulated in a &lt;div&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">With function arguments<\/h3>\n\n\n\n<p>The following examples use a script that takes arguments to link the text with script and display property.<\/p>\n\n\n\n<p><script type=\"text\/javascript\"><br \/>\nfunction toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }<br \/>\n<\/script><\/p>\n\n\n\n<p><button onclick=\"toggle_visibility('p1')\">Toggle Me<\/button><\/p>\n\n\n\n<div id=\"p1\">\n<p>The first quick brown fox jumped over the lazy dog<\/p>\n<\/div>\n\n\n\n<p><script type=\"text\/javascript\"><br \/>\nfunction toggle_textm(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }<br \/>\n<\/script><\/p>\n\n\n\n<p><button onclick=\"toggle_textm('p2')\">Toggle Me<\/button><\/p>\n\n\n\n<div id=\"p2\">\n<p>The second quick brown fox jumped over the lazy dog<\/p>\n<\/div>\n\n\n\n<p>This works with two copies of the script and <em>on the second click<\/em>, which show the code is syntactically correct. Perhaps it&#8217;s to do with it&#8217;s load images and whether it unloads?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Let&#8217;s have a look at why it only works on the second click? This <a href=\"https:\/\/stackoverflow.com\/questions\/25255486\/toggle-display-only-working-on-second-click\">in substack<\/a> suggests that strangely, the order of the test is important, which when I study the logic, seems to be the logical.<\/p>\n\n\n\n<p><script type=\"text\/javascript\"><br \/>\nfunction toggle_text2(id) {<br \/>\n    var e = document.getElementById(id);<br \/>\n    if(e.style.display == 'block')<br \/>\n        e.style.display = 'none';<br \/>\n    else e.style.display = 'block'; }<br \/>\n<\/script><\/p>\n\n\n\n<p><button onclick=\"toggle_text2('p3')\">Toggle Me<\/button><\/p>\n\n\n\n<div id=\"p3\" style=\"display: block;\">\n<p>The third fox has a snooze<\/p>\n<\/div>\n\n\n\n<p>so it looks like the script has to be aligned with the default visibility<\/p>\n\n\n\n<p>The first button uses a script that is tightly aligned with the para ID. The second and third button use a script which takes the paragraph ID from a command line argument, but the button is tightly tied to to paragraph ID. The fourth button, invokes a third script which operates on a paragraph with <code>display:block;<\/code>; this works as expected. So now we need a fifth button.<\/p>\n\n\n\n<p><script type=\"text\/javascript\"><br \/>\nfunction toggle_text3(id) {<br \/>\n    var e = document.getElementById(id);<br \/>\n    if(e.style.display == 'none')<br \/>\n        e.style.display = 'block';<br \/>\n    else e.style.display = 'none'; }<br \/>\n<\/script><\/p>\n\n\n\n<p><button onclick=\"toggle_text3('p4')\">Toggle Me<\/button><\/p>\n\n\n\n<div id=\"p4\" style=\"display: none;\">\n<p>The fox hound is lost!<\/p>\n<\/div>\n\n\n\n<p>This is working as expected, although the substack article suggests using a != test rather than a == works better, their reasoning is that display = &#8216;none&#8217; is not always evaluated correctly.<\/p>\n\n\n\n<p><!---- Button 6, Para 5 starts invisible, takes parameters. ---><br><script type=\"text\/javascript\"><br \/>\nfunction toggle_text4(id) {<br \/>\n    var e = document.getElementById(id);<br \/>\n    if(e.style.display != 'block')<br \/>\n        e.style.display = 'block';<br \/>\n    else e.style.display = 'none'; }<br \/>\n<\/script><\/p>\n\n\n\n<p><button onclick=\"toggle_text4('p5')\">Toggle Me<\/button><\/p>\n\n\n\n<div id=\"p5\" style=\"display: none;\">The spaniel is running around in circles.<\/div>\n\n\n\n<p>Stack Overflow have a note on <a href=\"https:\/\/stackoverflow.com\/questions\/14209105\/can-more-than-one-function-be-added-in-an-external-javascript-file-i-e-js-file\">external multi-function javascript files<\/a>. It&#8217;s all very simple.<\/p>\n\n\n\n<p>An now using an <a href=\"http:\/\/davelevy.info\/scripts\/dfl_javascripts.js\">external javascript file<\/a>, also at<a href=\"https:\/\/github.com\/dfl1955\/javascript\"> github.com<\/a><\/p>\n\n\n\n<p><script src=\"http:\/\/davelevy.info\/scripts\/dfl_javascripts.js\"><\/script><br><button onclick=\"toggle_text('p6')\">Toggle Me<\/button><\/p>\n\n\n\n<div id=\"p6\" style=\"display: block;\">\n<p>Where&#8217;d that greyhound go?<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">New Code from Gemini<\/h3>\n\n\n\n<p>I used some Gemini generated code to amend <a href=\"https:\/\/davelevy.info\/wiki\/bg3-modding-the-game\/\">https:\/\/davelevy.info\/wiki\/bg3-modding-the-game\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article was my first article to prove a toggle on display\/hide. You can see the widget below\/overleaf. &#8230;<\/p>\n","protected":false},"author":1,"featured_media":6386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[20],"tags":[917,1780,253,981],"class_list":["post-6262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-admin","tag-admin","tag-buttons","tag-html","tag-test"],"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@davelevy_eu\/111863516769566011","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2022\/02\/buttons-einaszasadi-unsplash-w750h200-crpd.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/6262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=6262"}],"version-history":[{"count":2,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/6262\/revisions"}],"predecessor-version":[{"id":13938,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/6262\/revisions\/13938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/6386"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=6262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=6262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=6262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}