Tengo un problema realmente extraño con algunos HTML con los que he estado trabajando. Tengo dos div que son independientes entre sí. Aunque ambos usan el mismo CSS, cada div tiene sus propios datos. Traté de crear un botón "mostrar más" para cada div, donde al hacer clic en el botón se expande el div, y luego cambia el texto del botón a "mostrar menos".
Sin embargo, tengo un problema en el que cada div en una página separada funciona perfectamente, pero cuando ambos div están en la misma página HTML como yo quiero que estén, al pasar el mouse sobre el botón tiene efectos secundarios no deseados. En lugar de que cada botón cambie de color de forma independiente cuando se pasa el cursor sobre él (el primer botón se vuelve gris cuando pasa el cursor sobre él, mientras que el segundo se vuelve marrón), al pasar el cursor sobre el primer botón se afecta el color del segundo botón. Al pasar el mouse sobre el segundo botón también afecta el color del segundo botón.
Este es un jsfiddle del problema
Aquí está el código:

$(document).ready(function() {
      $("#period1").ready(function() {
        showall = $("#period1 .showallbutton");
        classgrade = $("#period1 .head tr .grade b");
        footbar = $("#period1 .foot");
        headbar = $("#period1 .head");
        gtbar = $("#period1 .gradestopbar");
        elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
        percentcolumn = $("#period1 .grades tr td:nth-child(5)");
        eccolumn = $("#period1 .grades tr td:nth-child(6) center");
        percentcolumn.each(function() {
          elem = $(this)
          percent = $(this).text();
          percentfloat = parseFloat(percent)
          if (percentfloat <= 69.9) {
            elem.parent().css("color", "#DD0000");
          } else if (percentfloat >= 70 && percentfloat <= 84.9) {
            elem.parent().css("color", "#000000");
          } else if (percentfloat >= 85) {
            elem.parent().css("color", "#00bb00")
          }
        });
        eccolumn.each(function() {
          elem = $(this)
          eccheckmark = elem.text();
          if (eccheckmark === "✔") {
            elem.parent().parent().css("color", "#008FFF")
          }
        });
        if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
          headbar.css("background-color", "#1EC53A");
          gtbar.css("background-color", "#1EC53A");
          footbar.css("background-color", "#1A9AFF")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#008FFF99");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#1A9AFF")
          });
        } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
          headbar.css("background-color", "#DD0000");
          gtbar.css("background-color", "#DD0000");
          footbar.css("background-color", "#DD0000");
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#AA0000");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#DD0000");
          });
        } else {
          headbar.css("background-color", "black");
          gtbar.css("background-color", "black");
          footbar.css("background-color", "black");
          showall.css("color", "white")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "gray");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "black");
          });
        }
        showall.click(function() {
          if (elementshidden.css("display") === "table-row") {
            elementshidden.hide();
            showall.text("Show More")
          } else if (elementshidden.css("display") === "none") {
            elementshidden.show();
            showall.text("Show Less");
          }
        });
      });
    $("#period2").ready(function() {
      showall = $("#period2 .showallbutton");
      classgrade = $("#period2 .head tr .grade b");
      footbar = $("#period2 .foot");
      headbar = $("#period2 .head");
      gtbar = $("#period2 .gradestopbar");
      elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
      percentcolumn = $("#period2 .grades tr td:nth-child(5)");
      eccolumn = $("#period2 .grades tr td:nth-child(6) center");
      percentcolumn.each(function() {
        elem = $(this)
        percent = $(this).text();
        percentfloat = parseFloat(percent)
        if (percentfloat <= 69.9) {
          elem.parent().css("color", "#DD0000");
        } else if (percentfloat >= 70 && percentfloat <= 84.9) {
          elem.parent().css("color", "#000000");
        } else if (percentfloat >= 85) {
          elem.parent().css("color", "#00bb00")
        }
      });
      eccolumn.each(function() {
        $(this).parent().parent().css("color", "#008FFF")
      });
      if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
        headbar.css("background-color", "#1EC53A");
        gtbar.css("background-color", "#1EC53A");
        footbar.css("background-color", "#1A9AFF")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#008FFF99");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#1A9AFF")
        });
      } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
        headbar.css("background-color", "#DD0000");
        gtbar.css("background-color", "#DD0000");
        footbar.css("background-color", "#DD0000");
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#AA0000");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#DD0000");
        });
      } else {
        headbar.css("background-color", "black");
        gtbar.css("background-color", "black");
        footbar.css("background-color", "black");
        showall.css("color", "white")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "gray");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "black");
        });
      }
      showall.click(function() {
        if (elementshidden.css("display") === "table-row") {
          elementshidden.hide();
          showall.text("Show More")
        } else if (elementshidden.css("display") === "none") {
          elementshidden.show();
          showall.text("Show Less");
        }
      });
    });
  });
    body {
      font-family: "Poppins", sans-serif;
      margin: 0 auto;
      padding: 15px;
    }
    .maincontainer {
      padding-bottom: 15px;
    }
    .grades {
      border-collapse: collapse;
      width: 100%;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .grades td, .grades th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .grades tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .grades tr:nth-child(2n+3) {
      background-color: #ffffff;
      color: black;
    }

    .grades tr:not(:nth-last-child(-n+5)) {
      display: none;
    }

    .grades tr:first-child {
      display: table-row;
    }

    .grades tr:not(.gradestopbar):hover {
      background-color: #ddd;
    }

    .grades th {
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
    }

    .gradestopbar {
      border-top: 0.5px solid black;
      color: white;
    }

    .gradestopbar th {
      border: 1px solid black;
    }

    .datedue {
      width: 13%;
    }

    .assigned {
      width: 13%;
    }

    .assignment {
      width: 32%;
    }

    .scorefraction {
      width: 13%;
    }

    .scorepercent {
      width: 13%;
    }

    .extracreditcheckbox {
      width: 8%;
    }

    .notgradedcheckbox {
      width: 8%;
    }

    .head {
      border-collapse: separate;
      width: 100%;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: 0.5px solid black;
    }

    .head th {
      padding-top: 12px;
      padding-bottom: 12px;
      color: white;
    }

    .foot {
      font-size: 27px;
      border-collapse: separate;
      width: 100%;
      text-align: center;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      border: 2px solid black;
    }

    .showallbutton {
      height: 40px;
      width: 60%;
      border: none;
      background-color: white;
      font-family: "Poppins", sans-serif;
      font-size: 20px;
      cursor: pointer;
      background-color: transparent;
    }

    .showallbutton:focus {
      outline: 0;
    }

    .grade {
      font-size: 27px;
      width: 10%;
      text-align: center;
    }

    .course {
      font-size: 24px;
      width: 45%;
      text-align: center;
    }

    .teacher {
      font-size: 24px;
      padding-right: 50px;
      width: 45%;
      text-align: center;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 1: <b>Adv Mathemagic II</b>
        </th>
        <th class="grade">
          <b>B-</b>
        </th>
        <th class="teacher">
          <b>Johnson, John</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/20/2018
        </td>
        <td>
          01/20/2018
        </td>
        <td>
          Mathemagic Practical Exam
        </td>
        <td>
          <sup>87</sup>&#8260;<sub>100</sub>
        </td>
        <td>
          87%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>

          01/21/2018

        </td>
        <td>

          01/21/2018

        </td>
        <td>

          Participation

        </td>
        <td>

          <sup>15</sup>&#8260;<sub>30</sub>

        </td>
        <td>

          50%

        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Extra Credit Assignment
        </td>
        <td>
          <sup>5</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          100%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Graphing
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>1</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 1
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 2
        </td>
        <td>
          <sup>2</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          66.6%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 3
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 4
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 5
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 6
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
    <div id="period2" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 2: <b>Honors PE 5</b>
        </th>
        <th class="grade">
          <b>F</b>
        </th>
        <th class="teacher">
          <b>Daveson, Dave</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/01/2018
        </td>
        <td>
          01/01/2018
        </td>
        <td>
          Volleyball Bouncing Test
        </td>
        <td>
          <sup>12</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          60%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/21/2018
        </td>
        <td>
          01/21/2018
        </td>
        <td>
          January Participation
        </td>
        <td>
          <sup>30</sup>&#8260;<sub>30</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Basketball into Trashcan Test
        </td>
        <td>
          <sup>18</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          90%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Track and Field Sprinting Test
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          5%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          February Participation
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Swimming Test
        </td>
        <td>
          <sup>15</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          75%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          GSW Extra Credit
        </td>
        <td>
          <sup>4</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          80%
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>

Puede ver que cuando mueve el cursor sobre el primer botón, cambia el color del segundo botón sin afectar el primer botón. Esencialmente, el primer botón "mostrar más" solo funciona como un botón para controlar el segundo div. No le hace nada al div para el que se supone que está trabajando. Una vez más, ambos divs funcionan correctamente cuando están en sus propios archivos HTML, pero fallan cuando se juntan.

¡Gracias de antemano!

Nota: Toda la información en el html es falsa y ha sido sustituida para proteger la privacidad. Pero no creo que esa sea la razón de ningún problema.

-1
Bruce Wayne 4 mar. 2018 a las 22:11

3 respuestas

La mejor respuesta

El problema es que todas sus variables como showall, classgrade etc. son variables globales. Entonces, el controlador de eventos hover se adjunta al botón adecuado, pero cuando se activa el evento de desplazamiento del tiempo, la variable footbar se refiere al footbar dentro de #period2 y el efecto se pone aplicado en el botón inferior.

Todo lo que necesita hacer es declarar variables locales en la función como se muestra a continuación.

$(document).ready(function() {
      $("#period1").ready(function() {
        var showall = $("#period1 .showallbutton");
        var classgrade = $("#period1 .head tr .grade b");
        var footbar = $("#period1 .foot");
        var headbar = $("#period1 .head");
        var gtbar = $("#period1 .gradestopbar");
        var elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
        var percentcolumn = $("#period1 .grades tr td:nth-child(5)");
        var eccolumn = $("#period1 .grades tr td:nth-child(6) center");
        percentcolumn.each(function() {
          elem = $(this)
          percent = $(this).text();
          percentfloat = parseFloat(percent)
          if (percentfloat <= 69.9) {
            elem.parent().css("color", "#DD0000");
          } else if (percentfloat >= 70 && percentfloat <= 84.9) {
            elem.parent().css("color", "#000000");
          } else if (percentfloat >= 85) {
            elem.parent().css("color", "#00bb00")
          }
        });
        eccolumn.each(function() {
          elem = $(this)
          eccheckmark = elem.text();
          if (eccheckmark === "✔") {
            elem.parent().parent().css("color", "#008FFF")
          }
        });
        if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
          headbar.css("background-color", "#1EC53A");
          gtbar.css("background-color", "#1EC53A");
          footbar.css("background-color", "#1A9AFF")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#008FFF99");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#1A9AFF")
          });
        } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
          headbar.css("background-color", "#DD0000");
          gtbar.css("background-color", "#DD0000");
          footbar.css("background-color", "#DD0000");
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#AA0000");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#DD0000");
          });
        } else {
          headbar.css("background-color", "black");
          gtbar.css("background-color", "black");
          footbar.css("background-color", "black");
          showall.css("color", "white")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "gray");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "black");
          });
        }
        showall.click(function() {
          if (elementshidden.css("display") === "table-row") {
            elementshidden.hide();
            showall.text("Show More")
          } else if (elementshidden.css("display") === "none") {
            elementshidden.show();
            showall.text("Show Less");
          }
        });
      });
    $("#period2").ready(function() {
      var showall = $("#period2 .showallbutton");
      var classgrade = $("#period2 .head tr .grade b");
      var footbar = $("#period2 .foot");
      var headbar = $("#period2 .head");
      var gtbar = $("#period2 .gradestopbar");
      var elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
      var percentcolumn = $("#period2 .grades tr td:nth-child(5)");
      var eccolumn = $("#period2 .grades tr td:nth-child(6) center");
      percentcolumn.each(function() {
        elem = $(this)
        percent = $(this).text();
        percentfloat = parseFloat(percent)
        if (percentfloat <= 69.9) {
          elem.parent().css("color", "#DD0000");
        } else if (percentfloat >= 70 && percentfloat <= 84.9) {
          elem.parent().css("color", "#000000");
        } else if (percentfloat >= 85) {
          elem.parent().css("color", "#00bb00")
        }
      });
      eccolumn.each(function() {
        $(this).parent().parent().css("color", "#008FFF")
      });
      if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
        headbar.css("background-color", "#1EC53A");
        gtbar.css("background-color", "#1EC53A");
        footbar.css("background-color", "#1A9AFF")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#008FFF99");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#1A9AFF")
        });
      } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
        headbar.css("background-color", "#DD0000");
        gtbar.css("background-color", "#DD0000");
        footbar.css("background-color", "#DD0000");
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#AA0000");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#DD0000");
        });
      } else {
        headbar.css("background-color", "black");
        gtbar.css("background-color", "black");
        footbar.css("background-color", "black");
        showall.css("color", "white")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "gray");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "black");
        });
      }
      showall.click(function() {
        if (elementshidden.css("display") === "table-row") {
          elementshidden.hide();
          showall.text("Show More")
        } else if (elementshidden.css("display") === "none") {
          elementshidden.show();
          showall.text("Show Less");
        }
      });
    });
  });
    body {
      font-family: "Poppins", sans-serif;
      margin: 0 auto;
      padding: 15px;
    }
    .maincontainer {
      padding-bottom: 15px;
    }
    .grades {
      border-collapse: collapse;
      width: 100%;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .grades td, .grades th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .grades tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .grades tr:nth-child(2n+3) {
      background-color: #ffffff;
      color: black;
    }

    .grades tr:not(:nth-last-child(-n+5)) {
      display: none;
    }

    .grades tr:first-child {
      display: table-row;
    }

    .grades tr:not(.gradestopbar):hover {
      background-color: #ddd;
    }

    .grades th {
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
    }

    .gradestopbar {
      border-top: 0.5px solid black;
      color: white;
    }

    .gradestopbar th {
      border: 1px solid black;
    }

    .datedue {
      width: 13%;
    }

    .assigned {
      width: 13%;
    }

    .assignment {
      width: 32%;
    }

    .scorefraction {
      width: 13%;
    }

    .scorepercent {
      width: 13%;
    }

    .extracreditcheckbox {
      width: 8%;
    }

    .notgradedcheckbox {
      width: 8%;
    }

    .head {
      border-collapse: separate;
      width: 100%;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: 0.5px solid black;
    }

    .head th {
      padding-top: 12px;
      padding-bottom: 12px;
      color: white;
    }

    .foot {
      font-size: 27px;
      border-collapse: separate;
      width: 100%;
      text-align: center;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      border: 2px solid black;
    }

    .showallbutton {
      height: 40px;
      width: 60%;
      border: none;
      background-color: white;
      font-family: "Poppins", sans-serif;
      font-size: 20px;
      cursor: pointer;
      background-color: transparent;
    }

    .showallbutton:focus {
      outline: 0;
    }

    .grade {
      font-size: 27px;
      width: 10%;
      text-align: center;
    }

    .course {
      font-size: 24px;
      width: 45%;
      text-align: center;
    }

    .teacher {
      font-size: 24px;
      padding-right: 50px;
      width: 45%;
      text-align: center;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 1: <b>Adv Mathemagic II</b>
        </th>
        <th class="grade">
          <b>B-</b>
        </th>
        <th class="teacher">
          <b>Johnson, John</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/20/2018
        </td>
        <td>
          01/20/2018
        </td>
        <td>
          Mathemagic Practical Exam
        </td>
        <td>
          <sup>87</sup>&#8260;<sub>100</sub>
        </td>
        <td>
          87%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>

          01/21/2018

        </td>
        <td>

          01/21/2018

        </td>
        <td>

          Participation

        </td>
        <td>

          <sup>15</sup>&#8260;<sub>30</sub>

        </td>
        <td>

          50%

        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Extra Credit Assignment
        </td>
        <td>
          <sup>5</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          100%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Graphing
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>1</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 1
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 2
        </td>
        <td>
          <sup>2</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          66.6%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 3
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 4
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 5
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 6
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
    <div id="period2" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 2: <b>Honors PE 5</b>
        </th>
        <th class="grade">
          <b>F</b>
        </th>
        <th class="teacher">
          <b>Daveson, Dave</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/01/2018
        </td>
        <td>
          01/01/2018
        </td>
        <td>
          Volleyball Bouncing Test
        </td>
        <td>
          <sup>12</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          60%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/21/2018
        </td>
        <td>
          01/21/2018
        </td>
        <td>
          January Participation
        </td>
        <td>
          <sup>30</sup>&#8260;<sub>30</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Basketball into Trashcan Test
        </td>
        <td>
          <sup>18</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          90%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Track and Field Sprinting Test
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          5%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          February Participation
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Swimming Test
        </td>
        <td>
          <sup>15</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          75%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          GSW Extra Credit
        </td>
        <td>
          <sup>4</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          80%
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
0
Vivek Athalye 4 mar. 2018 a las 19:33

Deberá tener diferentes variables en sus funciones ready. La forma en que declara sus variables las hace de alcance global y ese es su problema allí. He realizado muy pocos cambios, querrás terminar esto, declarando tus variables con las palabras clave const, let o var

$(document).ready(function() {
      $("#period1").ready(function() {
        const showall = $("#period1 .showallbutton");
        const classgrade = $("#period1 .head tr .grade b");
        const footbar = $("#period1 .foot");
        const headbar = $("#period1 .head");
        const gtbar = $("#period1 .gradestopbar");
        const elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
        const percentcolumn = $("#period1 .grades tr td:nth-child(5)");
        const eccolumn = $("#period1 .grades tr td:nth-child(6) center");
        percentcolumn.each(function() {
          elem = $(this)
          percent = $(this).text();
          percentfloat = parseFloat(percent)
          if (percentfloat <= 69.9) {
            elem.parent().css("color", "#DD0000");
          } else if (percentfloat >= 70 && percentfloat <= 84.9) {
            elem.parent().css("color", "#000000");
          } else if (percentfloat >= 85) {
            elem.parent().css("color", "#00bb00")
          }
        });
        eccolumn.each(function() {
          elem = $(this)
          eccheckmark = elem.text();
          if (eccheckmark === "✔") {
            elem.parent().parent().css("color", "#008FFF")
          }
        });
        if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
          headbar.css("background-color", "#1EC53A");
          gtbar.css("background-color", "#1EC53A");
          footbar.css("background-color", "#1A9AFF")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#008FFF99");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#1A9AFF")
          });
        } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
          headbar.css("background-color", "#DD0000");
          gtbar.css("background-color", "#DD0000");
          footbar.css("background-color", "#DD0000");
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#AA0000");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#DD0000");
          });
        } else {
          headbar.css("background-color", "black");
          gtbar.css("background-color", "black");
          footbar.css("background-color", "black");
          showall.css("color", "white")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "gray");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "black");
          });
        }
        showall.click(function() {
          if (elementshidden.css("display") === "table-row") {
            elementshidden.hide();
            showall.text("Show More")
          } else if (elementshidden.css("display") === "none") {
            elementshidden.show();
            showall.text("Show Less");
          }
        });
      });
    $("#period2").ready(function() {
      showall = $("#period2 .showallbutton");
      classgrade = $("#period2 .head tr .grade b");
      footbar = $("#period2 .foot");
      headbar = $("#period2 .head");
      gtbar = $("#period2 .gradestopbar");
      elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
      percentcolumn = $("#period2 .grades tr td:nth-child(5)");
      eccolumn = $("#period2 .grades tr td:nth-child(6) center");
      percentcolumn.each(function() {
        elem = $(this)
        percent = $(this).text();
        percentfloat = parseFloat(percent)
        if (percentfloat <= 69.9) {
          elem.parent().css("color", "#DD0000");
        } else if (percentfloat >= 70 && percentfloat <= 84.9) {
          elem.parent().css("color", "#000000");
        } else if (percentfloat >= 85) {
          elem.parent().css("color", "#00bb00")
        }
      });
      eccolumn.each(function() {
        $(this).parent().parent().css("color", "#008FFF")
      });
      if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
        headbar.css("background-color", "#1EC53A");
        gtbar.css("background-color", "#1EC53A");
        footbar.css("background-color", "#1A9AFF")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#008FFF99");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#1A9AFF")
        });
      } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
        headbar.css("background-color", "#DD0000");
        gtbar.css("background-color", "#DD0000");
        footbar.css("background-color", "#DD0000");
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#AA0000");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#DD0000");
        });
      } else {
        headbar.css("background-color", "black");
        gtbar.css("background-color", "black");
        footbar.css("background-color", "black");
        showall.css("color", "white")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "gray");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "black");
        });
      }
      showall.click(function() {
        if (elementshidden.css("display") === "table-row") {
          elementshidden.hide();
          showall.text("Show More")
        } else if (elementshidden.css("display") === "none") {
          elementshidden.show();
          showall.text("Show Less");
        }
      });
    });
  });
    body {
      font-family: "Poppins", sans-serif;
      margin: 0 auto;
      padding: 15px;
    }
    .maincontainer {
      padding-bottom: 15px;
    }
    .grades {
      border-collapse: collapse;
      width: 100%;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .grades td, .grades th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .grades tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .grades tr:nth-child(2n+3) {
      background-color: #ffffff;
      color: black;
    }

    .grades tr:not(:nth-last-child(-n+5)) {
      display: none;
    }

    .grades tr:first-child {
      display: table-row;
    }

    .grades tr:not(.gradestopbar):hover {
      background-color: #ddd;
    }

    .grades th {
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
    }

    .gradestopbar {
      border-top: 0.5px solid black;
      color: white;
    }

    .gradestopbar th {
      border: 1px solid black;
    }

    .datedue {
      width: 13%;
    }

    .assigned {
      width: 13%;
    }

    .assignment {
      width: 32%;
    }

    .scorefraction {
      width: 13%;
    }

    .scorepercent {
      width: 13%;
    }

    .extracreditcheckbox {
      width: 8%;
    }

    .notgradedcheckbox {
      width: 8%;
    }

    .head {
      border-collapse: separate;
      width: 100%;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: 0.5px solid black;
    }

    .head th {
      padding-top: 12px;
      padding-bottom: 12px;
      color: white;
    }

    .foot {
      font-size: 27px;
      border-collapse: separate;
      width: 100%;
      text-align: center;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      border: 2px solid black;
    }

    .showallbutton {
      height: 40px;
      width: 60%;
      border: none;
      background-color: white;
      font-family: "Poppins", sans-serif;
      font-size: 20px;
      cursor: pointer;
      background-color: transparent;
    }

    .showallbutton:focus {
      outline: 0;
    }

    .grade {
      font-size: 27px;
      width: 10%;
      text-align: center;
    }

    .course {
      font-size: 24px;
      width: 45%;
      text-align: center;
    }

    .teacher {
      font-size: 24px;
      padding-right: 50px;
      width: 45%;
      text-align: center;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 1: <b>Adv Mathemagic II</b>
        </th>
        <th class="grade">
          <b>B-</b>
        </th>
        <th class="teacher">
          <b>Johnson, John</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/20/2018
        </td>
        <td>
          01/20/2018
        </td>
        <td>
          Mathemagic Practical Exam
        </td>
        <td>
          <sup>87</sup>&#8260;<sub>100</sub>
        </td>
        <td>
          87%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>

          01/21/2018

        </td>
        <td>

          01/21/2018

        </td>
        <td>

          Participation

        </td>
        <td>

          <sup>15</sup>&#8260;<sub>30</sub>

        </td>
        <td>

          50%

        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Extra Credit Assignment
        </td>
        <td>
          <sup>5</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          100%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Graphing
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>1</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 1
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 2
        </td>
        <td>
          <sup>2</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          66.6%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 3
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 4
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 5
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 6
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
    <div id="period2" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 2: <b>Honors PE 5</b>
        </th>
        <th class="grade">
          <b>F</b>
        </th>
        <th class="teacher">
          <b>Daveson, Dave</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/01/2018
        </td>
        <td>
          01/01/2018
        </td>
        <td>
          Volleyball Bouncing Test
        </td>
        <td>
          <sup>12</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          60%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/21/2018
        </td>
        <td>
          01/21/2018
        </td>
        <td>
          January Participation
        </td>
        <td>
          <sup>30</sup>&#8260;<sub>30</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Basketball into Trashcan Test
        </td>
        <td>
          <sup>18</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          90%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Track and Field Sprinting Test
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          5%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          February Participation
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Swimming Test
        </td>
        <td>
          <sup>15</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          75%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          GSW Extra Credit
        </td>
        <td>
          <sup>4</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          80%
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
0
sudavid4 4 mar. 2018 a las 19:35

Definitivamente mucho código para revisar, pero veo tu problema. Estás haciendo referencia a los dos botones según la clase showAll. Como ambos tienen la misma clase, se llama al evento de desplazamiento para cada botón.

Debe asignar a cada botón una identificación de topButton y bottomButton.

Desde allí puede acceder directamente a cada botón individualmente usando:

document.getElementById("topButton")

Use .style para cambiar el CSS de cada botón.

0
Joe 4 mar. 2018 a las 19:24