Codepen here: https://codepen.io/anon/pen/gRJEwx
So basically jQuery toggle 'slide' slides the div in and then right back out. It only happens every second or third time you press the button. It never happens on the first try but seems to happen on the second or third try after clicking the back button.
$('#go').on('click', function() {
$('#s1').fadeOut('slow', function() {
$('#s2').toggle('slide', {
direction: 'right'
}, 800, function() {
$('#s2 .back').on('click', function() {
$('#s2').fadeOut('slow', function() {
$('#s1').toggle('slide', {
direction: 'right'
}, 800);
});
});
});
});
});
body {
overflow: hidden;
width: 400px;
background: gray;
height: 400px;
}
#s1,
#s2 {
width: 100%;
height: 100%;
}
#s1 {
padding: 20px;
display: block;
background: purple;
}
#s2 {
padding: 20px;
display: none;
background: blue;
}
#s3 {
display: none;
background: black;
}
#go,
#go2 {
width: 400px;
padding: 10px 0;
margin: 20px auto;
text-align: center;
font-weight: bold;
background: white;
}
.back {
background: white;
font-weight: bold;
width: 300px;
padding: 10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s1">
<div id="go">GO TO SCREEN2</div>
</div>
<div id="s2">
<div class="back">GO BACK</div>
</div>
So essentially it's working right the first time. But the second time it shows the second screen and then immediately hides. Any idea how I can get it to slide and then stay put until the back button is pressed?
You are binding new #s2 .back click event every time you click on #go. Move it out of click event.
Also please not how .on is working. It must be binded to static element, so it's form is $(staticElement).on(event, dynamicElement, callback). So if your #go is some time will be removed and added using JS, than your provided form will not work.
$(document).on('click', '#go', function() {
$('#s1').fadeOut('slow', function() {
$('#s2').toggle('slide', {
direction: 'right'
}, 800);
});
});
$(document).on('click', '#s2 .back', function() {
$('#s2').fadeOut('slow', function() {
$('#s1').toggle('slide', {
direction: 'right'
}, 800);
});
});
body {
overflow: hidden;
width: 400px;
background: gray;
height: 400px;
}
#s1,
#s2 {
width: 100%;
height: 100%;
}
#s1 {
padding: 20px;
display: block;
background: purple;
}
#s2 {
padding: 20px;
display: none;
background: blue;
}
#s3 {
display: none;
background: black;
}
#go,
#go2 {
width: 400px;
padding: 10px 0;
margin: 20px auto;
text-align: center;
font-weight: bold;
background: white;
}
.back {
background: white;
font-weight: bold;
width: 300px;
padding: 10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="s1">
<div id="go">GO TO SCREEN2</div>
</div>
<div id="s2">
<div class="back">GO BACK</div>
</div>
You have the second on click event listener as a callback to the first one.
Unnest them so they sit at the same depth in the code:
$('#go').on('click', function(){
$('#s1').fadeOut('slow', function(){
$('#s2').toggle('slide', {direction: 'right'}, 800);
});
});
$('#s2 .back').on('click', function(){
$('#s2').fadeOut('slow', function(){
$('#s1').toggle('slide', {direction: 'right'}, 800);
});
});
Related
I want to call all divs because TUTTIiDIV is already an array. When I run this code the console looks okay, but the code doesn't work as expected.
How can I select all the elements of the array TUTTIiDIV?
document.addEventListener("DOMContentLoaded", function() {
var TUTTIiDIV = document.querySelectorAll("div");
document TUTTIiDIV.onclick = function() {
coloraicontorni()
}
}); //END DOMcontentLoaded
function coloraicontorni() {
var TUTTIiDIV = document.querySelectorAll("div");
for (i = 0; i <= TUTTIiDIV.length; i++) {
TUTTIiDIV[i].classList.add('contorno');
}
};
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>
Use delegation from the closest container to choose a click on anything in that container
window.addEventListener("load", function() { // when the page has loaded
document.getElementById("container").addEventListener("click", function(e) {
[...this.querySelectorAll("div")] // the "this" is the container
.forEach(div => div.classList.add('contorno'));
});
});
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="container">
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>
</div>
If you ONLY want to click the divs, do this
window.addEventListener("load", function() { // when the page has loaded
document.getElementById("container").addEventListener("click", function(e) {
if (e.target.tagName === "DIV") { // only if we click a div in the container
[...this.querySelectorAll("div")] // the "this" is the container
.forEach(div => div.classList.add('contorno'));
}
});
});
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="container">
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>
</div>
You can do it like this, I've adjusted your function.
Run the snippet below:
var TUTTIiDIV = document.querySelectorAll("div");
for (let i = 0; i < TUTTIiDIV.length; i++) {
//addEventListener "click" for each div that you are looping through with querySelectorAll
TUTTIiDIV[i].addEventListener("click", function() {
TUTTIiDIV[i].classList.toggle("contorno");
});
}
* {
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno {
border: 8px solid black;
}
<div id="rosso">
</div>
<div id="blu">
</div>
<div id="giallo">
</div>
This works for me. Give me feedback if u too. ;)
Edit after Scott Marcus comment.
const tuttiDiv = document.querySelectorAll('div');
document.addEventListener("click", (event) => {
if(event.target.nodeName === "DIV"){
tuttiDiv.forEach((div) => {
div.classList.toggle("contorno");
});
}
});
As you correctly point out TUTTIiDIV is a collection and so it won't have an onclick property to set, however your coloraicontorni function correctly loops over each item in the collection and modifies its classList.
But, better yet, use event delegation to more simply solve this.
Also, you should only have your <script> referenced once and that should be just before the closing body tag so that by the time the script is processed, all the HTML will have been parsed. This removes the need for the DOMContentLoaded event handler.
See comments below:
// If your <script> is located just before the closing body tag,
// then it is not necessary to set up the DOMContentLoaded event
//document.addEventListener("DOMContentLoaded", function(){
// Instead of setting up an event handler on each <DIV>, just
// set up a single event handler on the document and when the
// click events bubble up to it, check event.target to see
// which element actually triggered the event. This is called
// "event delegation".
let divs = document.querySelectorAll("div");
document.addEventListener("click", function(event){
// Check to see if it was a <div> that triggered the event
if(event.target.nodeName === "DIV"){
// Loop over all the <div> elements in the collection
divs.forEach(function(div){
div.classList.add("contorno"); // Add the class
});
}
});
* { box-sizing: border-box; }
body { background-color: antiquewhite; }
#rosso {
width: 25%;
height: 150px;
background-color: red;
display: inline-block;
}
#blu {
width: 25%;
height: 150px;
background-color: blue;
display: inline-block;
}
#giallo {
width: 25%;
height: 150px;
background-color: yellow;
display: inline-block;
}
.contorno { border: 8px solid black; }
<div id="rosso"></div>
<div id="blu"></div>
<div id="giallo"></div>
let divs = [...document.getElementsByTagName('div')];
divs.forEach(div => {
div.addEventListener('click',function(){
div.classList.toggle('border');
})
});
div{
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}
.border{
border: 10px solid black;
}
<div class='d' style="background: red;"></div>
<div class='d' style="background: green;"></div>
<div class='d' style="background: blue"></div>
I have a parent <a> with an href attribute. I have a child <p> and I want a small box to be opened when I click on child element.
The problem is when I click on the child element, it opens the small box but after a second the parent link opens up too. I don't want the parent link to be opened when I click on child element. I added event.stopPropagation() but it doesn't change anything. I also added z-index property but no changes either.
In my JS Fiddle demo you can see a live example; but here is my code so far:
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<a class="parent" href="https://www.google.com/">
<p class="child" title="This is mobile tooltip" tabindex="0" (click)="$event.stopPropagation();">Click</p>
</a>
JS Fiddle demo
PS: I cannot use jQuery.
Thanks.
Let me explain What I did was create a variable that changed whenever it hovered on the element or off the element. Next Whenever the user clicked on it I just ran a check to see if the mouse was not hovering on the element and executed a code if was on the element I ran a other code
var mouse = false;
function mouseStatus(n) {
mouse = n;
}
function parent() {
if (mouse == false) {
console.log('parent');
window.open('www.google.com');
}
}
function child() {
console.log('child');
}
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<a class="parent" onclick="parent()">
<p class="child" title="This is mobile tooltip" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);" onclick="child()">Click</p>
</a>
call a function instead :
onEvent(event) {
event.stopPropagation();
return false;
}
calling the function with
(click) ="onEvent($event)"
I asked this question yesterday, but I didn't use enough detail. I have this pop up code but I'm having trouble figuring out how to modify it for a once only action.
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
We were affected by the fire next door and will remain closed until further notice.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Code to produce a Javascript pop up on page load can be found here
Any help would be greatly appreciated. I'm not very good at this. How would I make this only appear once on page load?
Not sure if I fully understand what you mean by have the modal appear only once on page load. Is it that you want the modal to appear only on the first ever page load and not appear in any subsequent page reload? If so, then you can achieve this by using localStorage as follows
<script type='text/javascript'>
$(function () {
if (!localStorage['show-popup']) {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
localStorage['show-popup'] = disable
}
});
</script>
I am creating a yellow hover area, when the mouse hovers around this area, event: a tab appear in exactly this hover area. But when I put the mouse there, the tab starts to appear and shaking
But I don't know how to make the shaking error go away
here is my code
$(document).ready(function () {
$('#demo').mouseleave(function(event) {
$('.tab').stop().animate({
opacity : '0.5',
marginLeft: '190px',
width:'0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity : '1',
marginLeft: '0px', width:'190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position:absolute;
margin-left: 10px;
width:190px;
height:100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height:100%;
opacity: 0.5;
background-color: #876;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
anyone help me with this? I am a javascript beginner
Instead of firing mouseleave event on #demo, i fire mouseleave event on .tab
$(document).ready(function() {
$('.tab').mouseleave(function(event) {
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
it's because you trigger the hover only on the yellow rectangle and when the tab appears you stop hover the yellow rectangle. In my solution, you need to trigger the mouseleave() event also on the .tab.
$(document).ready(function() {
$('#demo').mouseleave(function(event) {
$('.tab').mouseleave(function(event) { //add this line
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
}); //add this line
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
Do you want any user interaction on the tab?
If not, then I would add pointer-events: none; property to your .tab class.
Then the mouseleave event won't trigger, but you wouldn't be able to use any mouse events inside your tab element.
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."
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>
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>
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.