How to display the text and disappear when a div is clicked?

advertisements

Hi I am very new to web development and was practicing some of the things I learned.

I built a basic program to toggle day and night. When you click the sun the moon appears and vise versa. You can see that the text "Good Afternoon!" and "Good Night!" appear as a default. I would like to be able to have "Good Afternoon!" appear only when the sun is present and "Good Night!" to appear only when the moon is present. Any help would be appreciated.

Here is the fiddle.

I tried something along the lines of this to mimic the other code but I know it is incorrect.

/*toggle text*/
if ($('#daytext').hasClass('visible')) {
  $('#daytext').removeClass('visible');
} else {
  $('#daytext').removeClass('visible');
}


You can use CSS properties to achieve that.

Look at visibility : hidden; and display : none;.

From here, "Another common display value is none. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.

This is different from visibility. Setting display to none will render the page as though the element does not exist. visibility: hidden; will hide the element, but the element will still take up the space it would if it was fully visible."