What is the process for showing and hiding text when a div is clicked?

Question

What is the process for showing and hiding text when a div is clicked?

Hey, I'm completely new to web development and decided to practice some of the concepts I've been learning about.

I created a simple program that toggles between day and night. Clicking on the sun reveals the moon, and clicking on the moon reveals the sun. You'll notice that by default, the text "Good Afternoon!" and "Good Night!" are displayed. I would like the text "Good Afternoon!" to only appear when the sun is visible, and "Good Night!" to only appear when the moon is visible. Any guidance on how to achieve this would be greatly appreciated.

You can find the code in this fiddle.

I attempted to write code that would replicate the behavior of the existing program, but I am aware that it is not correct:

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

javascript jquery html css

Answer 1

Answer №1

To achieve the desired effect, you can utilize CSS properties.

Consider using visibility : hidden; and display : none;.

According to a resource found 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.

It's important to note the distinction between display and visibility. Setting display to none will make the element appear as if it doesn't exist. On the other hand, visibility: hidden; will hide the element while still maintaining the space it occupies as if it were fully visible."

Answer 2

To achieve the desired effect, you can utilize CSS properties.

Consider using visibility : hidden; and display : none;.

According to a resource found 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.

It's important to note the distinction between display and visibility. Setting display to none will make the element appear as if it doesn't exist. On the other hand, visibility: hidden; will hide the element while still maintaining the space it occupies as if it were fully visible."

Answer 3

Answer №2

Check out the updated fiddle.

To hide the default Good Night! text and toggle its visibility with a click using jQuery's show() and hide() methods, you can use the following code:

if ($('#orb').hasClass('sun')) {
    $('#daytext').hide();
    $('#nighttext').show();
    $('#orb').removeClass('sun').addClass('moon');
} else {
    $('#daytext').show();
    $('#nighttext').hide();
    $('#orb').removeClass('moon').addClass('sun');
}

Hope this solution is useful!

$(document).ready(function() {
  $('#orb').click(function() {

    /*Day and night toggle*/
    if ($('#orb').hasClass('sun')) {
    $('#daytext').hide();
      $('#nighttext').show();
      $('#orb').removeClass('sun').addClass('moon');
    } else {
    $('#daytext').show();
      $('#nighttext').hide();
      $('#orb').removeClass('moon').addClass('sun');
    }

    if ($('#sky').hasClass('day')) {
      $('#sky').removeClass('day').addClass('night');
    } else {
      $('#sky').removeClass('night').addClass('day');
    }

    /*toggle visible moonspots*/
    if ($('#moonspot1').hasClass('visible')) {
      $('#moonspot1').removeClass('visible');
    } else {
      $('#moonspot1').addClass('visible');
    }
    if ($('#moonspot2').hasClass('visible')) {
      $('#moonspot2').removeClass('visible');
    } else {
      $('#moonspot2').addClass('visible');
    }
    if ($('#moonspot3').hasClass('visible')) {
      $('#moonspot3').removeClass('visible');
    } else {
      $('#moonspot3').addClass('visible');
    }
    /*toggle text*/
    if ($('#daytext').hasClass('visible')) {
      $('#daytext').removeClass('visible');
    } else {
      $('#daytext').removeClass('visible');
    }

  });

});

#orb {
  height: 300px;
  width: 300px;
  border-radius: 100%;
  padding: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  botton 0;
  right: 0;
}

#sky {
  height: 100%;
  width: 100%;
}

.sun {
  background-color: #ffdd00;
  border: 10px solid #f1c40f;
}

.sun:hover {
  border: 20px solid #f1c40f;
}

.moon {
  background-color: #bdc3c7;
  border: 10px solid #eaeff2;
}

.moon:hover {
  border: 20px solid #eaeff2;
}

.night {
  background-color: #2c3e50;
}

.day {
  background-color: #aaecf2;
}

#moonspot1 {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

#moonspot2 {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

#moonspot3 {
  height: 150px;
  width: 150px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

.visible {
  background-color: #eaeff2;
}

#daytext {
  font-size: 50px;
  font-family: Optima;
}

#nighttext {
  font-size: 50px;
  font-family: Optima;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
  <div id="orb" class="sun">
    <div id="moonspot1"></div>
    <div id="moonspot2"></div>
    <div id="moonspot3"></div>
  </div>
  <div id = "daytext">Good Afternoon!</div>
  <div id = "nighttext" style='display:none'>Good Night!</div>
</body>

Answer 4

Check out the updated fiddle.

To hide the default Good Night! text and toggle its visibility with a click using jQuery's show() and hide() methods, you can use the following code:

if ($('#orb').hasClass('sun')) {
    $('#daytext').hide();
    $('#nighttext').show();
    $('#orb').removeClass('sun').addClass('moon');
} else {
    $('#daytext').show();
    $('#nighttext').hide();
    $('#orb').removeClass('moon').addClass('sun');
}

Hope this solution is useful!

$(document).ready(function() {
  $('#orb').click(function() {

    /*Day and night toggle*/
    if ($('#orb').hasClass('sun')) {
    $('#daytext').hide();
      $('#nighttext').show();
      $('#orb').removeClass('sun').addClass('moon');
    } else {
    $('#daytext').show();
      $('#nighttext').hide();
      $('#orb').removeClass('moon').addClass('sun');
    }

    if ($('#sky').hasClass('day')) {
      $('#sky').removeClass('day').addClass('night');
    } else {
      $('#sky').removeClass('night').addClass('day');
    }

    /*toggle visible moonspots*/
    if ($('#moonspot1').hasClass('visible')) {
      $('#moonspot1').removeClass('visible');
    } else {
      $('#moonspot1').addClass('visible');
    }
    if ($('#moonspot2').hasClass('visible')) {
      $('#moonspot2').removeClass('visible');
    } else {
      $('#moonspot2').addClass('visible');
    }
    if ($('#moonspot3').hasClass('visible')) {
      $('#moonspot3').removeClass('visible');
    } else {
      $('#moonspot3').addClass('visible');
    }
    /*toggle text*/
    if ($('#daytext').hasClass('visible')) {
      $('#daytext').removeClass('visible');
    } else {
      $('#daytext').removeClass('visible');
    }

  });

});

#orb {
  height: 300px;
  width: 300px;
  border-radius: 100%;
  padding: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  botton 0;
  right: 0;
}

#sky {
  height: 100%;
  width: 100%;
}

.sun {
  background-color: #ffdd00;
  border: 10px solid #f1c40f;
}

.sun:hover {
  border: 20px solid #f1c40f;
}

.moon {
  background-color: #bdc3c7;
  border: 10px solid #eaeff2;
}

.moon:hover {
  border: 20px solid #eaeff2;
}

.night {
  background-color: #2c3e50;
}

.day {
  background-color: #aaecf2;
}

#moonspot1 {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

#moonspot2 {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

#moonspot3 {
  height: 150px;
  width: 150px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

.visible {
  background-color: #eaeff2;
}

#daytext {
  font-size: 50px;
  font-family: Optima;
}

#nighttext {
  font-size: 50px;
  font-family: Optima;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
  <div id="orb" class="sun">
    <div id="moonspot1"></div>
    <div id="moonspot2"></div>
    <div id="moonspot3"></div>
  </div>
  <div id = "daytext">Good Afternoon!</div>
  <div id = "nighttext" style='display:none'>Good Night!</div>
</body>

Answer 5

Answer №3

In order to streamline your code, I have simplified the classes that need to be toggled. By toggling only between the .day and .night classes, you can achieve the same outcome. I have utilized display: none to hide elements that are not relevant based on the current state.

$(document).ready(function() {
  $('#orb').click(function() {

    /*Day and night toggle*/
    if ($('#sky').hasClass('day')) {
      $('#sky').removeClass('day').addClass('night');
    } else {
      $('#sky').removeClass('night').addClass('day');
    }

  });
});

#sky {
  height: 100%;
  width: 100%;
}
.night {
  background-color: #2c3e50;
}
.day {
  background-color: #aaecf2;
}

#orb {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  padding: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  botton 0;
  right: 0;
}
.sun {
  background-color: #ffdd00;
  border: 10px solid #f1c40f;
}
.sun:hover {
  border: 20px solid #f1c40f;
}
/* styling the #sky.night .sun to be the moon */
.night .sun {
  background-color: #bdc3c7;
  border: 10px solid #eaeff2;
}
.night .sun:hover {
  border: 20px solid #eaeff2;
}

/* common styles for the 3 moonspots */
.moonspot {
  background-color: #eaeff2;
  border-radius: 50%;
  float: right;
  margin: 20px;
}
/* hide moonspots during day */
.day .moonspot {
  display: none;
}
#moonspot1 {
  height: 50px;
  width: 50px;
}
#moonspot2 {
  height: 80px;
  width: 80px;
}
#moonspot3 {
  height: 150px;
  width: 150px;
}

.text {
  font-size: 50px;
  font-family: Optima;
  /* position & z-index to put text above other elements */
  position: relative;
  z-index: 1;
}
/* hide the irrelevant text based on day/night */
.day #nighttext {
  display: none;
}
.night #daytext {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
  <div id="orb" class="sun">
    <div class="moonspot" id="moonspot1"></div>
    <div class="moonspot" id="moonspot2"></div>
    <div class="moonspot" id="moonspot3"></div>
  </div>
  <div class="text" id="daytext">Good Afternoon!</div>
  <div class="text" id="nighttext">Good Night!</div>
</body>

Answer 6

In order to streamline your code, I have simplified the classes that need to be toggled. By toggling only between the .day and .night classes, you can achieve the same outcome. I have utilized display: none to hide elements that are not relevant based on the current state.

$(document).ready(function() {
  $('#orb').click(function() {

    /*Day and night toggle*/
    if ($('#sky').hasClass('day')) {
      $('#sky').removeClass('day').addClass('night');
    } else {
      $('#sky').removeClass('night').addClass('day');
    }

  });
});

#sky {
  height: 100%;
  width: 100%;
}
.night {
  background-color: #2c3e50;
}
.day {
  background-color: #aaecf2;
}

#orb {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  padding: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  botton 0;
  right: 0;
}
.sun {
  background-color: #ffdd00;
  border: 10px solid #f1c40f;
}
.sun:hover {
  border: 20px solid #f1c40f;
}
/* styling the #sky.night .sun to be the moon */
.night .sun {
  background-color: #bdc3c7;
  border: 10px solid #eaeff2;
}
.night .sun:hover {
  border: 20px solid #eaeff2;
}

/* common styles for the 3 moonspots */
.moonspot {
  background-color: #eaeff2;
  border-radius: 50%;
  float: right;
  margin: 20px;
}
/* hide moonspots during day */
.day .moonspot {
  display: none;
}
#moonspot1 {
  height: 50px;
  width: 50px;
}
#moonspot2 {
  height: 80px;
  width: 80px;
}
#moonspot3 {
  height: 150px;
  width: 150px;
}

.text {
  font-size: 50px;
  font-family: Optima;
  /* position & z-index to put text above other elements */
  position: relative;
  z-index: 1;
}
/* hide the irrelevant text based on day/night */
.day #nighttext {
  display: none;
}
.night #daytext {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
  <div id="orb" class="sun">
    <div class="moonspot" id="moonspot1"></div>
    <div class="moonspot" id="moonspot2"></div>
    <div class="moonspot" id="moonspot3"></div>
  </div>
  <div class="text" id="daytext">Good Afternoon!</div>
  <div class="text" id="nighttext">Good Night!</div>
</body>

Answer 7

Answer №4

If you're utilizing jQuery, there are various ways to achieve this. One solution is outlined below.

Within the $(document).ready() function, you can include the following code snippet.

$('#nighttext').toggle();

Subsequently, within your click function, the following actions can be taken:

$('#daytext').toggle();
$('#nighttext').toggle();

An alternative approach would be to have a single div element for the text content and modify both the text and its class upon each click event.

Answer 8

If you're utilizing jQuery, there are various ways to achieve this. One solution is outlined below.

Within the $(document).ready() function, you can include the following code snippet.

$('#nighttext').toggle();

Subsequently, within your click function, the following actions can be taken:

$('#daytext').toggle();
$('#nighttext').toggle();

An alternative approach would be to have a single div element for the text content and modify both the text and its class upon each click event.

What is the process for showing and hiding text when a div is clicked?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Allow for separation amongst my cellular components

How do I navigate to a different page in a Flask app after an ajax post depending on a condition detected in the view?

Display the primary element at the beginning with jCarouselLite

The presence of CSS rollovers on a scrollable div is causing overflow problems

HTML/CSS border tiling (left, bottom, right)

Delete a specific character sequence from a PHP form before storing it in a MySQL database

Can inter-portlet communication be achieved using AJAX?

Tips for parsing a JSON file within my node.js application?

Adjust the text input width appropriately for the cloze exercise

Customizable Designs in Oracle Application Express version 4.2

Showing the unique identifier instead of the actual data in HTML for a Firebase Object using Angularfire

Executing AngularJS code that returns a promise within an event

The HTML body is given a right margin for proper spacing

Is there a way to deactivate a div in Blazor when clicking outside of the div?

Getting the http response content of a Slim PHP API with Angular JS: A step-by-step guide

Ways to delete a property from an element that was originally included with jquery

Is there a way to automatically position a div element in alignment with an <a> tag within a document?

Guide to forming a JavaScript array from nested JSON data

The OK Button Dialogbox is currently malfunctioning

The value of Vue.js props appears as undefined