Hi, guys! I’m building a website with jQuery Functions and whatnot. I’m making my button change the page when you click on Future Dates. But, I’m having troubles with making it go back to Current Dates with the same button.
HTML:
<div id="header">
<h1>Fox Valley Runners Club</h1>
</div> <!-- End of 'header' div-->
<div id="main">
<button class="change">Future Dates</button>
</div> <!-- End of 'main' div-->
<div id="pics">
<div class="race_box">
<img id="first" src="images/run1.jpg" /><br />
<figcaption>5k/10k Events</figcaption>
<div class="races" id="5k">
<h3>5k/10 Events</h3>
<ul>
<li id="firstlist">Mini Sprint<li class="firstmini">10/30/17 Memorial Park Appleton</li></li>
<li id="firstlist2">Iron Horse<li class="firstmini2">11/06/17 Bay Beach Park Green Bay</li></li>
<li id="firstlist3">Twilight Trail<li class="firstmini3">11/13/17 River's Edge Park Wrightstown</li></li>
</ul>
</div><!-- End of '5k' div-->
</div> <!-- End of 'run1' div-->
<div class="race_box">
<img id="second" src="images/run2.jpg" /><br />
<figcaption>Half Marathon Events</figcaption>
<div class="races" id="half">
<h3>Half Marathon Events</h3>
<ul>
<li id="secondlist">Fox River Marathon<li class="secondmini">10/15/17 Pierce Park Appleton</li></li>
<li id="secondlist2">N.E.W. Half Marathon<li class="secondmini2">10/29/17 Bay Beach Park Green Bay</li></li>
<li id="secondlist3">Winnebago Run<li class="secondmini3">11/27/17 Menominee Park Oshkosh</li></li>
</ul>
</div> <!-- End of 'half' div-->
</div><!-- End of 'run2' div-->
<div class="race_box">
<img id="third" src="images/run3.jpg" /><br />
<figcaption>Full Marathon Events</figcaption>
<div class="races" id="full">
<h3>Full Marathon Events</h3>
<ul>
<li id="thirdlist">Cheesehead Marathon<li class="thirdmini">9/24/17 Pamperin Park Green Bay</li></li>
<li id="thirdlist2">Chain O'Lakes Marathon<li class="thirdmini2">10/29/17 Bay Beach Park Green Bay</li></li>
<li id="thirdlist3">Fox Cities Marathon<li class="thirdmini3">11/12/17 Menominee Park Oshkosh</li></li>
</ul>
</div> <!-- End of 'full' div-->
</div> <!-- End of 'run3' div-->
</div> <!-- End of 'pics' div-->
jQuery:
//Fire up the jQuery!
$(document).ready(function(){
//Hide everything in the class name of, "races", including its children.
$(".races").hide();
//First image should show and hide.
$("#first").click(function(){
$("#5k").toggle();
$("#half").slideUp();
$("#full").fadeOut();
$(".firstmini").hide();
$(".firstmini2").hide();
$(".firstmini3").hide();
});
//Second image should slide up and down.
$("#second").click(function(){
$("#half").slideToggle();
$("#5k").hide();
$("#full").fadeOut();
$(".secondmini").hide();
$(".secondmini2").hide();
$(".secondmini3").hide();
});
//Third image should fade in and out.
$("#third").click(function(){
$("#full").fadeToggle();
$("#5k").hide();
$("#half").slideUp();
$(".thirdmini").hide();
$(".thirdmini2").hide();
$(".thirdmini3").hide();
})
//Hide the class name of, "firstmini".
$(".firstmini").hide();
//5k/10k Events' firstlist should show its childern when clicked.
$("#firstlist").click(function(){
$(".firstmini").toggle();
$(".firstmini2").hide();
$(".firstmini3").hide();
});
//Hide the class name of, "firstmini2".
$(".firstmini2").hide();
//5k/10k Events' firstlist2 should show its childern when clicked.
$("#firstlist2").click(function(){
$(".firstmini2").toggle();
$(".firstmini").hide();
$(".firstmini3").hide();
});
//Hide the class name of, "firstmini3".
$(".firstmini3").hide();
//5k/10k Events' firstlist3 should show its childern when clicked.
$("#firstlist3").click(function(){
$(".firstmini3").toggle();
$(".firstmini").hide();
$(".firstmini2").hide();
});
//Hide the class name of, "secondmini".
$(".secondmini").hide();
//Half Marathons Events' secondlist should show its childern when clicked.
$("#secondlist").click(function(){
$(".secondmini").slideToggle();
$(".secondmini2").slideUp();
$(".secondmini3").slideUp();
});
//Hide the class name of, "secondmini2".
$(".secondmini2").hide();
//Half Marathons Events' secondlist2 should show its childern when clicked.
$("#secondlist2").click(function(){
$(".secondmini2").slideToggle();
$(".secondmini").slideUp();
$(".secondmini3").slideUp();
});
//Hide the class name of, "secondmini3".
$(".secondmini3").hide();
//Half Marathons Events' secondlist3 should show its childern when clicked.
$("#secondlist3").click(function(){
$(".secondmini3").slideToggle();
$(".secondmini").slideUp();
$(".secondmini2").slideUp();
});
//Hide the class name of, "thirdmini".
$(".thirdmini").hide();
//Half Marathons Events' thirdlist should show its childern when clicked.
$("#thirdlist").click(function(){
$(".thirdmini").fadeToggle();
$(".thirdmini2").fadeOut();
$(".thirdmini3").fadeOut();
});
//Hide the class name of, "thirdmini2".
$(".thirdmini2").hide();
//Half Marathons Events' thirdlist2 should show its childern when clicked.
$("#thirdlist2").click(function(){
$(".thirdmini2").fadeToggle();
$(".thirdmini").fadeOut();
$(".thirdmini3").fadeOut();
});
//Hide the class name of, "thirdmini3".
$(".thirdmini3").hide();
//Half Marathons Events' thirdlist3 should show its childern when clicked.
$("#thirdlist3").click(function(){
$(".thirdmini3").fadeToggle();
$(".thirdmini").fadeOut();
$(".thirdmini2").fadeOut();
});
//Future Dates button should show the dates for next year when clicked.
$(".change").click(function(){
$(".change").replaceWith("<button class='change'>Current Dates</button>");
//firstlist, secondlist & thirdlist will replace.
$("#firstlist").replaceWith("<li id='firstlist'>Snowball Sprint</li>");
$("#firstlist2").replaceWith("<li id='firstlist2'>Winter Warrior</li>");
$("#firstlist3").replaceWith("<li id='firstlist3'>Mid Valley Golf Course</li>");
$("#secondlist").replaceWith("<li id='secondlist'>Frosty Indoor Marathon</li>");
$("#secondlist2").replaceWith("<li id='secondlist2'>Valentine Run</li>");
$("#secondlist3").replaceWith("<li id='secondlist3'>Snowball Marathon</li>");
$("#thirdlist").replaceWith("<li id='thirdlist'>Trailbreaker Marathon</li>");
$("#thirdlist2").replaceWith("<li id='thirdlist2'>Jailbreak Marathon</li>");
$("#thirdlist3").replaceWith("<li id='thirdlist3'>Cellcom Marathon</li>");
//firstmini, secondmini, and third mini will replace.
$(".firstmini").replaceWith("<li class='firstmini'>1/14/18 Mosquito Hill New London</li>");
$(".firstmini2").replaceWith("<li class='firstmini2'>2/06/18 Bay Beach Green Bay</li>");
$(".firstmini3").replaceWith("<li class='firstmini3'>2/24/18 Mid Valley Golf Course De Pere</li>");
$(".secondmini").replaceWith("<li class='secondmini'>1/15/18 TryIt Ice Arena Neenah</li>");
$(".secondmini2").replaceWith("<li class='secondmini2'>2/12/18 Green Isle Park De Pere</li>");
$(".secondmini3").replaceWith("<li class='secondmini3'>3/03/18 Menominee Park Oshkosh</li>");
$(".thirdmini").replaceWith("<li class='thirdmini'>4/02/18 Leach Amphitheatre Oshkosh</li>");
$(".thirdmini2").replaceWith("<li class='thirdmini2'>4/16/18 Menominee Park Oshkosh</li>");
$(".thirdmini3").replaceWith("<li class='thirdmini3'>5/20/18 Lombardi Atrium Green Bay</li>");
//Hide the class name of, "firstmini", "firstmini2" & "firstmini3".
$(".firstmini").hide();
$(".firstmini2").hide();
$(".firstmini3").hide();
$(".secondmini").hide();
$(".secondmini2").hide();
$(".secondmini3").hide();
$(".thirdmini").hide();
$(".thirdmini2").hide();
$(".thirdmini3").hide();
//Reconstruct like before with your Current Dates.
$("#firstlist").click(function(){
$(".firstmini").toggle();
$(".firstmini2").hide();
$(".firstmini3").hide();
});
$("#firstlist2").click(function(){
$(".firstmini2").toggle();
$(".firstmini").hide();
$(".firstmini3").hide();
});
$("#firstlist3").click(function(){
$(".firstmini3").toggle();
$(".firstmini").hide();
$(".firstmini2").hide();
});
$("#secondlist").click(function(){
$(".secondmini").slideToggle();
$(".secondmini2").slideUp();
$(".secondmini3").slideUp();
});
$("#secondlist2").click(function(){
$(".secondmini2").slideToggle();
$(".secondmini").slideUp();
$(".secondmini3").slideUp();
});
$("#secondlist3").click(function(){
$(".secondmini3").slideToggle();
$(".secondmini").slideUp();
$(".secondmini2").slideUp();
});
$("#thirdlist").click(function(){
$(".thirdmini").fadeToggle();
$(".thirdmini2").fadeOut();
$(".thirdmini3").fadeOut();
});
$("#thirdlist2").click(function(){
$(".thirdmini2").fadeToggle();
$(".thirdmini").fadeOut();
$(".thirdmini3").fadeOut();
});
$("#thirdlist3").click(function(){
$(".thirdmini3").fadeToggle();
$(".thirdmini").fadeOut();
$(".thirdmini2").fadeOut();
});
});
});