CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Somone
Somone

Reputation: 63

How to make text appear and disappear when a div is clicked on?

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');
}

Upvotes: 3

Views: 3984

Answers (4)

Kielstra
Kielstra

Reputation: 535

You can do several things. Since you are using jQuery, the following is an option.

On $(document).ready() you can add the following.

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

Then in you click function you can do the following:

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

You could also create a single div for the text and change the text on click, together with it's class.

Upvotes: 0

Jon Uleis
Jon Uleis

Reputation: 18649

No need for so many classes to be toggled. I cleaned up your code to show you how to accomplish the same thing with only toggling between the .day and .night class. I'm using display: none to hide irrelevant elements depending on that 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>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Updated fiddle.

You've just to hide the Good Night! by default then toggle the visibility when you click using the jQuery methods show()/hide():

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 helps.

$(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>

Upvotes: 1

GothamCityRises
GothamCityRises

Reputation: 2102

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."

Upvotes: 3

Related Questions