Show and hide text by clicking a button

Question

hi. i want to show a line/group of text by clicking a button and at the same time hide it after im done reading the text. ... the text should originally be hidden when the user arrives at the page. thank you and god bless

Answer 1

It's simple, make a class in CSS .hidden and set in on your HTML elements you would like to hide at the start.

In CSS:
.hidden {
display: none;
}

In HTML
<p class="hidden">My text </p>

Then use javascript and create a function and attach event listener on button to toggle this class on and off whenever you click on the button.

Answer 2

hi thanks for the reply. hmmm i did what you ask me but im having a problem. the button needs to be clicked twice or 3 times before the text show but after that it runs smooth but when i refresh the page i wll have to click the button twice or 3 time again. any advice sir?

Answer 3

Try loading JS after the DOM is generated.

Answer 4

sir what do you mean by that? sorry im just new to js so im having problems😅. thanks for understanding

Answer 5

Apparently SL engine is silly and loads JS first and then DOM. So if you are trying to grab elements with JS it's throwing errors.
Try wrapping your whole code in this function (there are many ways of doing this)

document.addEventListener("DOMContentLoaded", () => {
//your code here
};

this will wait for event which is DOM content loaded and as soon as it is, it will start executing your code.