Toggle between hidden and visible text with Javascript

Question

I am working on a project where certain sentences need to be invisible. The user should be able to make them visible by clicking on the space the sentence occupies. Why won't the text become visible once I click the empty area?

document.getElementsByTagName("span")[0].style.visibility = "hidden"
document.getElementsByTagName("span")[0].addEventListener("click", toggle)

function toggle(){
    this.style.visibility = "visible"
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <span> Hi. How are you? </span>
  <span> I am fine </span>
 </body>
</html>

If something isn't visible, how can you click on it? – Scott Marcus Nov 25 '19 at 19:20 — Scott Marcus, Nov 25 '19 at 19:20

Scott Marcus · Answer 1 · 2019-11-26T12:32:14.467

You can't click on something that's not visible. Instead of visibility use opacity.

Additionally, don't use inline styles. Just make a CSS class and add/remove it as needed using the .classList API.

Lastly, this document.getElementsByTagName("span")[0] is really, really bad code.

// Use .querySelector() and .querySelectorAll() to get elements and collections
// of elements when necessary. 

// Set up your event on a parent of all the elements that need the
// same event handler. When a descendant within the parent fires
// an event, that event will bubble up to the parent and be handled
// there. This is called "event delegation"
document.addEventListener("click", toggle);

function toggle(event){
  // Check to see if the event was triggered by an element
  // that you care about. event.target represents the element
  // that actually triggered the event
  if(event.target.classList.contains("hideable")){
    // Just toggle (or add depending on what you want) the use of the CSS class
    //event.target.classList.add("hidden");    
     event.target.classList.toggle("hidden"); 
  }
}

/* Use CSS classes whenever possible.
   They are easier to set up and manage. */
.hidden { opacity:0; }
.hideable { cursor:pointer; }

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <span>My name is: </span>
  <span class="hideable hidden">Scott. </span>
  <span> I am fine. </span>
  <span class="hideable hidden">How are you? </span>
  <span> Have a great day! </span>
</body>
</html>

OPTIMUS PRIME · Answer 2 · 2019-11-25T19:38:00.017

CSS solution with visibility:

.hidden { visibility: hidden; }
.show-txt { display: none; }

.show-txt:checked + .hidden { visibility: visible; }

<label>
  <input class="show-txt" type="radio">
  <span class="hidden">Hi. How are you?</span>
</label>
<span>I am fine.</span>

<label>
  <input class="show-txt" type="radio">
  <span class="hidden">Hi. How are you?</span>
</label>
<span>I am fine.</span>

You can't click on invisible element. Hide them with opacity (or must wrap elements with another parent as in the previous example):

document.querySelectorAll('.opacity-hidden').forEach(function(span){
  span.addEventListener('click', function(){
    this.classList.remove('opacity-hidden');
  });
});

.opacity-hidden {
  opacity: 0;
  user-select: none;
}

<span class="opacity-hidden">Hi. How are you?</span>
<span>I am fine.</span>

<span class="opacity-hidden">Hi. How are you?</span>
<span>I am fine.</span>

Toggle between hidden and visible text with Javascript

2 Answers2