Ways to display or conceal text using Vanilla JavaScript

Question

Ways to display or conceal text using Vanilla JavaScript

I am struggling to toggle text visibility using Vanilla JS. Currently, I can only hide the text but cannot figure out how to show it again.

<button id="button">my button</button>
<div> 
 <p id="text">Hello</p>
</div>

This is the JavaScript code:

const z = document.getElementById('text');
const y = document.getElementById('button');

y.onclick = () => {
    z.style.display = 'none';
};

javascript html css ecmascript-6 sass

Answer 1

Answer №1

Opting for a class makes things simpler, as you can just toggle it on and off:

const element = document.getElementById('text');
const button = document.getElementById('button');

button.addEventListener('click', () => {
    element.classList.toggle('hidden');
});

.hidden { display: none; }

<button id="button">Click me</button>
<div> <p id="text">Hello World</p> </div>

Answer 2

Opting for a class makes things simpler, as you can just toggle it on and off:

const element = document.getElementById('text');
const button = document.getElementById('button');

button.addEventListener('click', () => {
    element.classList.toggle('hidden');
});

.hidden { display: none; }

<button id="button">Click me</button>
<div> <p id="text">Hello World</p> </div>

Answer 3

Answer №2

Here is a simple toggle example that allows you to control the visibility of an element.

const element = document.getElementById('targetElement');
const button = document.getElementById('toggleButton');

button.onclick = function() {
  element.style.display = element.style.display === 'none' ? '' : 'none';
}

<button id="toggleButton">Toggle Element</button>
<div> 
  <p id="targetElement">Lorem ipsum</p>
</div>

Answer 4

Here is a simple toggle example that allows you to control the visibility of an element.

const element = document.getElementById('targetElement');
const button = document.getElementById('toggleButton');

button.onclick = function() {
  element.style.display = element.style.display === 'none' ? '' : 'none';
}

<button id="toggleButton">Toggle Element</button>
<div> 
  <p id="targetElement">Lorem ipsum</p>
</div>

Ways to display or conceal text using Vanilla JavaScript

Answer №1

Answer №2

Similar questions

Can you clarify the semver meaning of the >= operator and what is the highest version it permits?

Are there any tools you rely on for speeding up the process of developing html/css?

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Struggling to access values from your model using EL in JavaScript? Let me provide some guidance

How come my useEffect still contains outdated data?

I am experiencing an issue with using double quotation marks in VS Code

The useEffect function is failing to execute when deploying on Vercel with Vite and React Router

The functionality of my script relies on the presence of an alert function within it

The presence of onChange?: (ValueType, ActionMeta) => void with OptionType is not compatible

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Generate a JavaScript File/Blob from an image's URI

What is the best way to send a form value to a servlet?

Having trouble importing the name 'RadioChoiceInput' from the 'django.forms.widgets' module during the migration from Django 1.19 to 3.2

Understanding the binary format in JavaScript

Access a specific element within an array using Handlebars.js

Issue with creating a variable name inside a JavaScript for loop

The Python error message, "JSONDecodeError: Expecting value: line 1 column 1 (char 0)," indicates that there

What's causing the appearance of a horizontal scrollbar?

Detect Flash Player Event using Javascript

Retrieve information from the identical registration form in Codeigniter