This article was my first article to prove a toggle on display/hide. You can see the widget below/overleaf. …

How to toggle the show and display of text. Here’s my first attempt. It came from w3schools.

<script> function maxdisplay() {
  var x = document.getElementById("questions");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
<button  onclick="maxdisplay()">View Questions</button>
<div id="questions">The quick brown fox ....</div>

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 parameterise 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 toggle_text4 which looks like this,

function toggle_text(id) { 
    var e = document.getElementById(id);
    if(e.style.display != 'block') 
        e.style.display = 'block'; 
    else e.style.display = 'none'; }

The default of hidden is set by using a style statement with the property “display:none;” on the text to be toggled which is encapsulated in a <div>

With function arguments

The following examples use a script that takes arguments to link the text with script and display property.

The first quick brown fox jumped over the lazy dog

The second quick brown fox jumped over the lazy dog

This works with two copies of the script and on the second click, which show the code is syntactically correct. Perhaps it’s to do with it’s load images and whether it unloads?

Let’s have a look at why it only works on the second click? This in substack suggests that strangely, the order of the test is important, which when I study the logic, seems to be the logical.

The third fox has a snooze

so it looks like the script has to be aligned with the default visibility

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 display:block;; this works as expected. So now we need a fifth button.

This is working as expected, although the substack article suggests using a != test rather than a == works better, their reasoning is that display = ‘none’ is not always evaluated correctly.

Stack Overflow have a note on external multi-function javascript files. It’s all very simple.

An now using an external javascript file, also at github.com

Where’d that greyhound go?

Comments ( 4 )

  1. Using modals on this site. |
    […] I have also played with hide/display. See Buttons. […]
  2. ReplyAuthorDave
    As at today, the second two toggle's need to be clicked twice, there is a comment dated 13th Sep 2009 on this thread, which states that if one defaults to display = none, then it works as intended; it may also strangely relate to the order of the if statements.
  3. ReplyAuthorDave
    I have fixed the "double click needed" bug and referenced the stack overflow articles that helped.
  4. ReplyAuthorDave
    I have now implemented the function as an external javascript. On Firefox, using this theme, the display property needs to be explicitly set.

This site uses Akismet to reduce spam. Learn how your comment data is processed.