Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="periodic-table-wrap">
  <table class="periodic-table">
    <tr class="group-numbers">
      <td></td>
      <td class="group-number group-heading-1">
        <input type="radio" id="group-1" name="group-selector"/>
        <label for="group-1">1</label>
      </td>
      <td class="group-number group-heading-2">
        <input type="radio" id="group-2" name="group-selector"/>
        <label for="group-2">2</label>
      </td>
      <td class="group-number group-heading-3">
        <input type="radio" id="group-3" name="group-selector"/>
        <label for="group-3">3</label>
      </td>
      <td class="group-number group-heading-4">
        <input type="radio" id="group-4" name="group-selector"/>
        <label for="group-4">4</label>
      </td>
      <td class="group-number group-heading-5">
        <input type="radio" id="group-5" name="group-selector"/>
        <label for="group-5">5</label>
      </td>
      <td class="group-number group-heading-6">
        <input type="radio" id="group-6" name="group-selector"/>
        <label for="group-6">6</label>
      </td>
      <td class="group-number group-heading-7">
        <input type="radio" id="group-7" name="group-selector"/>
        <label for="group-7">7</label>
      </td>
      <td class="group-number group-heading-8">
        <input type="radio" id="group-8" name="group-selector"/>
        <label for="group-8">8</label>
      </td>
      <td class="group-number group-heading-9">
        <input type="radio" id="group-9" name="group-selector"/>
        <label for="group-9">9</label>
      </td>
      <td class="group-number group-heading-10">
        <input type="radio" id="group-10" name="group-selector"/>
        <label for="group-10">10</label>
      </td>
      <td class="group-number group-heading-11">
        <input type="radio" id="group-11" name="group-selector"/>
        <label for="group-11">11</label>
      </td>
      <td class="group-number group-heading-12">
        <input type="radio" id="group-12" name="group-selector"/>
        <label for="group-12">12</label>
      </td>
      <td class="group-number group-heading-13">
        <input type="radio" id="group-13" name="group-selector"/>
        <label for="group-13">13</label>
      </td>
      <td class="group-number group-heading-14">
        <input type="radio" id="group-14" name="group-selector"/>
        <label for="group-14">14</label>
      </td>
      <td class="group-number group-heading-15">
        <input type="radio" id="group-15" name="group-selector"/>
        <label for="group-15">15</label>
      </td>
      <td class="group-number group-heading-16">
        <input type="radio" id="group-16" name="group-selector"/>
        <label for="group-16">16</label>
      </td>
      <td class="group-number group-heading-17">
        <input type="radio" id="group-17" name="group-selector"/>
        <label for="group-17">17</label>
      </td>
      <td class="group-number group-heading-18">
        <input type="radio" id="group-18" name="group-selector"/>
        <label for="group-18">18</label>
      </td>
    </tr>
    <tr class="period period-1">
      <td class="period-number period-heading-1">
        <input type="radio" id="period-1" name="period-selector"/>
        <label for="period-1">1</label>
      </td>
      <td class="element group-1 period-1 nonmetal other-nonmetal">H</td>
      <td style="background:white;"></td>
      <td style="background:white;" rowspan="3" colspan="3">
        <div class="element-preview">
          <div class="element-atomic-number">1</div>
          <div class="element-symbol">H</div>
          <div class="element-name-weight">Hydrogen<br>1.008</div>
        </div>
      </td>
      <td rowspan="3" colspan="7" style="background:white;">
        <table class="element-types-table">
          <tr>
            <th class="nonmetals nonmetals-heading">
              <input type="radio" id="nonmetals" name="element-selector"/>
              <label for="nonmetals">Nonmetals</label>
            </th>
            <th class="metals metals-heading">
              <input type="radio" id="metals" name="element-selector"/>
              <label for="metals">Metals</label>
            </th>
          </tr>
          <tr>
            <td class="nonmetals other-nonmetals-heading">
              <input type="radio" id="other-nonmetals" name="element-selector"/>
              <label for="other-nonmetals">Other Nonmetals</label>
            </td>
            <td class="metals alkali-metals-heading">
              <input type="radio" id="alkali-metals" name="element-selector"/>
              <label for="alkali-metals">Alkali Metals</label>
            </td>
          </tr>
          <tr>
            <td class="nonmetals halogens-heading">
              <input type="radio" id="halogens" name="element-selector"/>
              <label for="halogens">Halogens</label>
            </td>
            <td class="metals alkaline-metals-heading">
              <input type="radio" id="alkaline-metals" name="element-selector"/>
              <label for="alkaline-metals">Alkaline Earth Metals</label>
            </td>
          </tr>
          <tr>
            <td class="nonmetals noble-gases-heading">
              <input type="radio" id="noble-gases" name="element-selector"/>
              <label for="noble-gases">Noble Gases</label>
            </td>
            <td class="metals lanthanides-heading">
              <input type="radio" id="lanthanides" name="element-selector"/>
              <label for="lanthanides">Lanthanides</label>
            </td>
          </tr>
          <tr>
            <td class="metals metalloids-heading" rowspan="2">
              <input type="radio" id="metalloids" name="element-selector"/>
              <label for="metalloids">Metalloids</label>
            </td>
            <td class="metals actinides-heading">
              <input type="radio" id="actinides" name="element-selector"/>
              <label for="actinides">Actinides</label>
            </td>
          </tr>
          <tr>
            <td class="metals transition-metals-heading">
              <input type="radio" id="transition-metals" name="element-selector"/>
              <label for="transition-metals">Transition Metals</label>
            </td>
          </tr>
          <tr>
            <td>
              <button id="reset-selector">Reset Selection</button>
            </td>
            <td class="metals post-transition-metals-heading">
              <input type="radio" id="post-transition-metals" name="element-selector"/>
              <label for="post-transition-metals">Post-Transition Metals</label>
            </td>
          </tr>
        </table>
      </td>
      <td colspan="5" style="background:white;"></td>
      <td class="element group-18 period-1 nonmetal noble-gas">He</td>
    </tr>
    <tr class="period period-2">
      <td class="period-number period-heading-2">
        <input type="radio" id="period-2" name="period-selector"/>
        <label for="period-2">2</label>
      </td>
      <td class="element group-1 period-2 metal alkali-metal">Li</td>
      <td class="element group-2 period-2 metal alkaline-metal">Be</td>
      <td class="element group-13 period-2 metalloid">B</td>
      <td class="element group-14 period-2 nonmetal other-nonmetal">C</td>
      <td class="element group-15 period-2 nonmetal other-nonmetal">N</td>
      <td class="element group-16 period-2 nonmetal other-nonmetal">O</td>
      <td class="element group-17 period-2 nonmetal halogen">F</td>
      <td class="element group-18 period-2 nonmetal noble-gas">Ne</td>
    </tr>
    <tr class="period period-3">
      <td class="period-number period-heading-3">
        <input type="radio" id="period-3" name="period-selector"/>
        <label for="period-3">3</label>
      </td>
      <td class="element group-1 period-3 metal alkali-metal">Na</td>
      <td class="element group-2 period-3 metal alkaline-metal">Mg</td>
      <td class="element group-13 period-3 metal post-transition-metal stairstep-element">Al</td>
      <td class="element group-14 period-3 metalloid">Si</td>
      <td class="element group-15 period-3 nonmetal other-nonmetal">P</td>
      <td class="element group-16 period-3 nonmetal other-nonmetal">S</td>
      <td class="element group-17 period-3 nonmetal halogen">Cl</td>
      <td class="element group-18 period-3 nonmetal noble-gas">Ar</td>
    </tr>
    <tr class="period period-4">
      <td class="period-number period-heading-4">
        <input type="radio" id="period-4" name="period-selector"/>
        <label for="period-4">4</label>
      </td>
      <td class="element group-1 period-4 metal alkali-metal">K</td>
      <td class="element group-2 period-4 metal alkaline-metal">Ca</td>
      <td class="element group-3 period-4 metal transition-metal">Sc</td>
      <td class="element group-4 period-4 metal transition-metal">Ti</td>
      <td class="element group-5 period-4 metal transition-metal">V</td>
      <td class="element group-6 period-4 metal transition-metal">Cr</td>
      <td class="element group-7 period-4 metal transition-metal">Mn</td>
      <td class="element group-8 period-4 metal transition-metal">Fe</td>
      <td class="element group-9 period-4 metal transition-metal">Co</td>
      <td class="element group-10 period-4 metal transition-metal">Ni</td>
      <td class="element group-11 period-4 metal transition-metal">Cu</td>
      <td class="element group-12 period-4 metal transition-metal">Zn</td>
      <td class="element group-13 period-4 metal post-transition-metal">Ga</td>
      <td class="element group-14 period-4 metalloid stairstep-element">Ge</td>
      <td class="element group-15 period-4 metalloid">As</td>
      <td class="element group-16 period-4 nonmetal other-nonmetal">Se</td>
      <td class="element group-17 period-4 nonmetal halogen">Br</td>
      <td class="element group-18 period-4 nonmetal noble-gas">Kr</td>
    </tr>
    <tr class="period period-5">
      <td class="period-number period-heading-5">
        <input type="radio" id="period-5" name="period-selector"/>
        <label for="period-5">5</label>
      </td>
      <td class="element group-1 period-5 metal alkali-metal">Rb</td>
      <td class="element group-2 period-5 metal alkaline-metal">Sr</td>
      <td class="element group-3 period-5 metal last-element transition-metal">Y</td>
      <td class="element group-4 period-5 metal transition-metal">Zr</td>
      <td class="element group-5 period-5 metal transition-metal">Nb</td>
      <td class="element group-6 period-5 metal transition-metal">Mo</td>
      <td class="element group-7 period-5 metal transition-metal">Tc</td>
      <td class="element group-8 period-5 metal transition-metal">Ru</td>
      <td class="element group-9 period-5 metal transition-metal">Rh</td>
      <td class="element group-10 period-5 metal transition-metal">Pd</td>
      <td class="element group-11 period-5 metal transition-metal">Ag</td>
      <td class="element group-12 period-5 metal transition-metal">Cd</td>
      <td class="element group-13 period-5 metal post-transition-metal">In</td>
      <td class="element group-14 period-5 metal post-transition-metal">Sn</td>
      <td class="element group-15 period-5 metalloid stairstep-element">Sb</td>
      <td class="element group-16 period-5 metalloid">Te</td>
      <td class="element group-17 period-5 nonmetal halogen">I</td>
      <td class="element group-18 period-5 nonmetal noble-gas">Xe</td>
    </tr>
    <tr class="period period-6">
      <td class="period-number period-heading-6">
        <input type="radio" id="period-6" name="period-selector"/>
        <label for="period-6">6</label>
      </td>
      <td class="element group-1 period-6 metal alkali-metal">Cs</td>
      <td class="element group-2 period-6 metal alkaline-metal">Ba</td>
      <td class="element-ext" style="background:white;">57-71</td>
      <td class="element group-4 period-6 metal transition-metal">Hf</td>
      <td class="element group-5 period-6 metal transition-metal">Ta</td>
      <td class="element group-6 period-6 metal transition-metal">W</td>
      <td class="element group-7 period-6 metal transition-metal">Re</td>
      <td class="element group-8 period-6 metal transition-metal">Os</td>
      <td class="element group-9 period-6 metal transition-metal">Ir</td>
      <td class="element group-10 period-6 metal transition-metal">Pt</td>
      <td class="element group-11 period-6 metal transition-metal">Au</td>
      <td class="element group-12 period-6 metal transition-metal">Hg</td>
      <td class="element group-13 period-6 metal post-transition-metal">Tl</td>
      <td class="element group-14 period-6 metal post-transition-metal">Pb</td>
      <td class="element group-15 period-6 metal post-transition-metal">Bi</td>
      <td class="element group-16 period-6 metalloid stairstep-element">Po</td>
      <td class="element group-17 period-6 nonmetal halogen">At</td>
      <td class="element group-18 period-6 nonmetal noble-gas">Rn</td>
    </tr>
    <tr class="period period-7">
      <td class="period-number period-heading-7">
        <input type="radio" id="period-7" name="period-selector"/>
        <label for="period-7">7</label>
      </td>
      <td class="element group-1 period-7 last-element metal alkali-metal">Fr</td>
      <td class="element group-2 period-7 last-element metal alkaline-metal">Ra</td>
      <td class="element-ext" style="background:white;">89-103</td>
      <td class="element group-4 period-7 last-element metal transition-metal">Rf</td>
      <td class="element group-5 period-7 last-element metal transition-metal">Db</td>
      <td class="element group-6 period-7 last-element metal transition-metal">Sg</td>
      <td class="element group-7 period-7 last-element metal transition-metal">Bh</td>
      <td class="element group-8 period-7 last-element metal transition-metal">Hs</td>
      <td class="element group-9 period-7 last-element metal transition-metal">Mt</td>
      <td class="element group-10 period-7 last-element metal transition-metal">Ds</td>
      <td class="element group-11 period-7 last-element metal transition-metal">Rg</td>
      <td class="element group-12 period-7 last-element metal transition-metal">Cn</td>
      <td class="element group-13 period-7 last-element metal post-transition-metal">Uut</td>
      <td class="element group-14 period-7 last-element metal post-transition-metal">Fl</td>
      <td class="element group-15 period-7 last-element metal post-transition-metal">Uup</td>
      <td class="element group-16 period-7 last-element metal post-transition-metal">Lv</td>
      <td class="element group-17 period-7 last-element nonmetal halogen">Uus</td>
      <td class="element group-18 period-7 last-element nonmetal noble-gas">Uuo</td>
    </tr>
    <tr class="period table-spacer">
      <td colspan="3" style="background:transparent;"></td>
      <td class="down-arrow">&darr;</td>
    </tr>
    <tr class="period lanthanides">
      <td colspan="3" style="background:white;"></td>
      <td class="element group-3 period-6 metal lanthanide">La</td>
      <td class="element group-3 period-6 metal lanthanide">Ce</td>
      <td class="element group-3 period-6 metal lanthanide">Pr</td>
      <td class="element group-3 period-6 metal lanthanide">Nd</td>
      <td class="element group-3 period-6 metal lanthanide">Pm</td>
      <td class="element group-3 period-6 metal lanthanide">Sm</td>
      <td class="element group-3 period-6 metal lanthanide">Eu</td>
      <td class="element group-3 period-6 metal lanthanide">Gd</td>
      <td class="element group-3 period-6 metal lanthanide">Tb</td>
      <td class="element group-3 period-6 metal lanthanide">Dy</td>
      <td class="element group-3 period-6 metal lanthanide">Ho</td>
      <td class="element group-3 period-6 metal lanthanide">Er</td>
      <td class="element group-3 period-6 metal lanthanide">Tm</td>
      <td class="element group-3 period-6 metal lanthanide">Yb</td>
      <td class="element group-3 period-6 metal lanthanide">Lu</td>
    </tr>
    <tr class="period actinides">
      <td colspan="3" style="background:white;"></td>
      <td class="element group-3 period-7 last-element metal actinide">Ac</td>
      <td class="element group-3 period-7 last-element metal actinide">Th</td>
      <td class="element group-3 period-7 last-element metal actinide">Pa</td>
      <td class="element group-3 period-7 last-element metal actinide">U</td>
      <td class="element group-3 period-7 last-element metal actinide">Np</td>
      <td class="element group-3 period-7 last-element metal actinide">Pu</td>
      <td class="element group-3 period-7 last-element metal actinide">Am</td>
      <td class="element group-3 period-7 last-element metal actinide">Cm</td>
      <td class="element group-3 period-7 last-element metal actinide">Bk</td>
      <td class="element group-3 period-7 last-element metal actinide">Cf</td>
      <td class="element group-3 period-7 last-element metal actinide">Es</td>
      <td class="element group-3 period-7 last-element metal actinide">Fm</td>
      <td class="element group-3 period-7 last-element metal actinide">Md</td>
      <td class="element group-3 period-7 last-element metal actinide">No</td>
      <td class="element group-3 period-7 last-element metal actinide">Lr</td>
    </tr>
  </table>
</div>
              
            
!

CSS

              
                .periodic-table-wrap {
  
}

.periodic-table { 
  margin: 1em auto;
}

.element {
  min-width: 60px;
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: center;
  background: mediumseagreen;
  font-weight: bold;
  color: white;
  font-size: 1.5em;
}

.last-element {
  box-shadow: 0 3px 5px -3px black;
}

.element-ext {
  text-align: center;
  vertical-align: center;
  background: transparent;
  font-size: 1em;
  color: mediumseagreen;
  font-weight: bold;
}

.periodic-table tr .period-number {
  color: mediumseagreen;
  background: white;
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
}

.group-number {
  color: mediumseagreen;
  background: white;
  vertical-align: bottom;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  height: auto;
}

.table-spacer td {
  height: 40px;
}

.periodic-table .down-arrow {
  font-size: 3em;
  font-weight: bold;
  color: mediumseagreen;
  background: white;
  text-align: center;
  vertical-align: middle;
}

/* ELEMENT PREVIEW */

.element-preview {
  margin: 0 auto;
  width: 160px;
  height: 160px;
  background: white;
  color: mediumseagreen;
  border: 3px solid mediumseagreen;
  font-size: 1.25em;
  box-sizing: padding-box;
  padding: 2px;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 10px -10px black;
}

.element-symbol {
  align-self: center;
  font-size: 4em;
  font-weight: bold;
  text-align: center;
}

.element-name-weight {
  margin-top: auto;
}

/* ELEMENT TYPE SELECTOR */

.element-types-table {
  text-align: center;
  min-width: 410px;
  height: 170px;
  font-size: 1em;
  font-weight: bold;
  background: white;
}

.metals-heading,
.nonmetals-heading {
  font-size: 1.15em;
  box-shadow: 0 5px 5px -5px black;
}

.element-types-table td {
  width: 50%;
}

input[type=radio] {
  display: none;
}

input[name=element-selector]:checked ~ label {
  color: orange;
  font-weight: bold;
}

.nonmetals {
  color: rgb(100,100,100);
}

.metals {
  color: rgb(60,179,113);
}

.element-types-table button {
  background: mediumseagreen;
  border: none;
  color: white;
  padding: 5px 8px;
  box-shadow: 0 5px 5px -5px black;
}

.element-types-table button:active {
  box-shadow: none;
  transform: scale(.95);
}

.element-types-table button:focus {
  outline: none;
}

/* Group Selector */

.group-number label {
  display: block;
}

input[name=group-selector]:checked ~ label {
  color: white;
  background: orange;
  font-weight: bold;
}

/* Period Selector */

.period-number label {
  display: block;
}

input[name=period-selector]:checked ~ label {
  color: white;
  background: orange;
  font-weight: bold;
}

/* Stairstep Element */

.stairstep-element {
  box-shadow: 2px -2px 2px black;
}

/* --------------------------
HOVERS FOR CURSOR POINTER
-------------------------- */

.period-number label:hover,
.group-number label:hover,
.element-types-table label:hover,
.element:hover {
  cursor: pointer;
}

              
            
!

JS

              
                $(function() {
  
  // Element Hover Function
  $(".element").mouseenter(function() {
    $(".element-preview").show();
    if($(this).css("background-color") == "rgb(60, 179, 113)") {
      $(this).css({
        "background": "white",
        "color": "mediumseagreen"
      })
    } else if($(this).css("background-color") == "rgb(255, 165, 0)") {
      $(this).css({
        "background": "white",
        "color": "orange"
      })
    }
  });
  $(".element").mouseleave(function() {
    $(".element-preview").hide();
    if($(this).css("color") == "rgb(255, 165, 0)") {
      $(this).css({
        "background": "orange",
        "color": "white"
      })
    } else {
      $(this).css({
        "background": "mediumseagreen",
        "color": "white"
      })
    }
  });
  
  // Group & Period Number Functions
  $(".group-number").mouseenter(function() {
    $(this).queue($(this).css({
      "background": "orange",
      "color": "white"
    }));
  });
  $(".group-number").mouseleave(function() {
    $(this).queue($(this).css({
      "background": "white",
      "color": "mediumseagreen"
    }));
  });
  $(".period-number").mouseenter(function() {
    $(this).queue($(this).css({
      "background": "orange",
      "color": "white"
    }));
  });
  $(".period-number").mouseleave(function() {
    $(this).queue($(this).css({
      "background": "white",
      "color": "mediumseagreen"
    }));
  });
  
  ///// Element Preview /////
  $(".element").change(function() {
    if($(".element").css("background-color") == "rgb(0, 0, 0)") {
      $(".element-preview").show();
    }
  })
  
  ///// Selecting Element Types /////
  // Reset Type Selection Button
  $('#reset-selector').on('click', function() {
    $('input[name$=selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
    });
    $(".element").css("background", "mediumseagreen");
  })
  // Nonmetals
  $(".nonmetals-heading").change(function(){
    if($(this).is(':checked')){
      $(".nonmetal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".nonmetal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Metals
  $(".metals-heading").change(function(){
    if($(this).is(':checked')){
      $(".metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Other Nonmetals
  $(".other-nonmetals-heading").change(function(){
    if($(this).is(':checked')){
      $(".other-nonmetal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".other-nonmetal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Halogens
  $(".halogens-heading").change(function(){
    if($(this).is(':checked')){
      $(".halogen").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".halogen").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Noble Gases
  $(".noble-gases-heading").change(function(){
    if($(this).is(':checked')){
      $(".noble-gas").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".noble-gas").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Metalloids
  $(".metalloids-heading").change(function(){
    if($(this).is(':checked')){
      $(".metalloid").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".metalloid").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Alkali Metals
  $(".alkali-metals-heading").change(function(){
    if($(this).is(':checked')){
      $(".alkali-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".alkali-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Alkaline Metals
  $(".alkaline-metals-heading").change(function(){
    if($(this).is(':checked')){
      $(".alkaline-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".alkaline-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Lanthanides
  $(".lanthanides-heading").change(function(){
    if($(this).is(':checked')){
      $(".lanthanide").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".lanthanide").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Actinides
  $(".actinides-heading").change(function(){
    if($(this).is(':checked')){
      $(".actinide").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".actinide").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Transition Metals
  $(".transition-metals-heading").change(function(){
    if($(this).is(':checked')){
      $(".transition-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".transition-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Post Transition Metals
  $(".post-transition-metals-heading").change(function(){
    if($(this).is(':checked')){
      $(".post-transition-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".post-transition-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  
  
  ///// Selecting Element Groups /////
  // Group 1 
  $(".group-heading-1").change(function(){
    if($(this).is(':checked')){
      $(".group-1").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-1").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 2 
  $(".group-heading-2").change(function(){
    if($(this).is(':checked')){
      $(".group-2").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-2").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 3 
  $(".group-heading-3").change(function(){
    if($(this).is(':checked')){
      $(".group-3").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-3").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 4 
  $(".group-heading-4").change(function(){
    if($(this).is(':checked')){
      $(".group-4").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-4").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 5 
  $(".group-heading-5").change(function(){
    if($(this).is(':checked')){
      $(".group-5").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-5").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 6 
  $(".group-heading-6").change(function(){
    if($(this).is(':checked')){
      $(".group-6").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-6").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 7 
  $(".group-heading-7").change(function(){
    if($(this).is(':checked')){
      $(".group-7").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-7").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 8 
  $(".group-heading-8").change(function(){
    if($(this).is(':checked')){
      $(".group-8").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-8").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 9 
  $(".group-heading-9").change(function(){
    if($(this).is(':checked')){
      $(".group-9").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-9").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 10 
  $(".group-heading-10").change(function(){
    if($(this).is(':checked')){
      $(".group-10").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-10").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 11 
  $(".group-heading-11").change(function(){
    if($(this).is(':checked')){
      $(".group-11").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-11").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 12 
  $(".group-heading-12").change(function(){
    if($(this).is(':checked')){
      $(".group-12").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-12").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 13 
  $(".group-heading-13").change(function(){
    if($(this).is(':checked')){
      $(".group-13").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-13").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 14 
  $(".group-heading-14").change(function(){
    if($(this).is(':checked')){
      $(".group-14").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-14").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 15 
  $(".group-heading-15").change(function(){
    if($(this).is(':checked')){
      $(".group-15").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-15").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 16 
  $(".group-heading-16").change(function(){
    if($(this).is(':checked')){
      $(".group-16").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-16").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 17 
  $(".group-heading-17").change(function(){
    if($(this).is(':checked')){
      $(".group-17").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-17").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 18 
  $(".group-heading-18").change(function(){
    if($(this).is(':checked')){
      $(".group-18").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-18").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  
  ///// Selecting Element Periods /////
  // Period 1 
  $(".period-heading-1").change(function(){
    if($(this).is(':checked')){
      $(".period-1").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-1").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 2 
  $(".period-heading-2").change(function(){
    if($(this).is(':checked')){
      $(".period-2").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-2").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 3 
  $(".period-heading-3").change(function(){
    if($(this).is(':checked')){
      $(".period-3").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-3").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 4 
  $(".period-heading-4").change(function(){
    if($(this).is(':checked')){
      $(".period-4").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-4").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 5 
  $(".period-heading-5").change(function(){
    if($(this).is(':checked')){
      $(".period-5").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-5").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 6 
  $(".period-heading-6").change(function(){
    if($(this).is(':checked')){
      $(".period-6").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-6").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 7 
  $(".period-heading-7").change(function(){
    if($(this).is(':checked')){
      $(".period-7").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-7").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  
})
              
            
!
999px

Console