0

I'm coding with jQuery at the moment. I learned about .replaceWith(); earlier this morning. When I click on my button, it switches to the "Future Dates", and the button changes to "Current Dates". It also switches the first listed item from "Mini Sprint" to "Snowball Sprint". But when I click my button back to "Current Dates", it no longer allows me to toggle it. Can someone explain why this isn't displaying correctly for me? Thank you.

$(document).ready(function() {

  //Hide everything with the class of races.
  $(".races").hide();

  //First image should show and hide.
  $("#first").click(function() {
    $("#5k").toggle();
    $(".firstmini").hide();
    $(".firstmini2").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist should show its children when clicked.
  $("#firstlist").click(function() {
    $(".firstmini").toggle();
    $(".firstmini2").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist2 should show its children when clicked.
  $("#firstlist2").click(function() {
    $(".firstmini2").toggle();
    $(".firstmini").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist3 should show its childern when clicked.
  $("#firstlist3").click(function() {
    $(".firstmini3").toggle();
    $(".firstmini").hide();
    $(".firstmini2").hide();
  });

  $(".change").click(function() {

    var $this = $(this);
    $this.toggleClass("Future Dates");

    if ($this.hasClass("Future Dates")) {
      $this.text("Current Dates");
      $("#firstlist").replaceWith("<li id='firstlist'>Snowball Sprint</li>");
    } else {
      $this.text("Future Dates");
      $("#firstlist").replaceWith("<li id='firstlist'>Mini Sprint</li>");
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="change">Future Dates</button>
<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
        <ul class="firstmini">
          <li>10/30/17 Memorial Park Appleton</li>
        </ul>
      </li>

      <li id="firstlist2">Iron Horse
        <ul class="firstmini2">
          <li>11/06/17 Bay Beach Park Green Bay</li>
        </ul>
      </li>

      <li id="firstlist3">Twilight Trail
        <ul class="firstmini3">
          <li>11/13/17 River's Edge Park Wrightstown</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
E. Young
  • 3
  • 3
  • You can't have a space in a class name, it's used to separate classes. `toggleClass("Future Dates")` and `hasClass("Future Dates")` won't do what you expect. – Barmar Oct 20 '17 at 00:28
  • None of the list items are visible because of `$(".races").hide()`. How do you click on them? – Barmar Oct 20 '17 at 00:31
  • Still a little new to this. – E. Young Oct 20 '17 at 00:32
  • But to click on them, you can just click on "mini sprint", "iron horse", "twilight trail." – E. Young Oct 20 '17 at 00:33
  • But as you can see, when you first run the code, "mini sprint" can toggle. Then, when you click the button. It will change "mini sprint" to "snowball sprint". When I click the button again, it should revert it back to its original state. But it no longer allow me to toggle "mini sprint". – E. Young Oct 20 '17 at 00:35
  • Doesn't my answer explain that? – Barmar Oct 20 '17 at 00:37
  • When I revert back to "current events" with my button, it won't allow me to toggle "mini sprints" anymore. I tried different ways and yours as well, but I'm not sure why it's still not working. – E. Young Oct 20 '17 at 00:41
  • When you replace the contents of `
  • ` it no longer has `
      ` inside it.
    • – Barmar Oct 20 '17 at 00:43
  • Oh, okay. Thank you so much, Barmar! I worked on it since this morning and I didn't know why. Still so much to learn with jQuery. – E. Young Oct 20 '17 at 00:51