JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="locationToggle">
  <div id="any">Any</div>
  <div id="dc">Washington, DC</div>
  <div id="arl">Arlington, VA</div>
  <div id="nrfk">Norfolk, VA</div>
  <div id="stfrd">Stafford, VA</div>
  <div id="chrl">Charleston, SC</div>
  <div id="nola">New Orleans, LA</div>
  <div id="orl">Orlando, FL</div>
  <div id="sd">San Diego, CA</div>
</div>
<div id="importPositions">
  <div class="careerLogoContainer cyberCareerContainer">
    <div class="careerLogo cyberLogo"></div>
    <h3>Cyber Security</h3>
  </div>
  <ul class="cyberUL">
    <li class="dc"><a href="http://falconwood.biz/positions/CybersecurityRMFAnalyst220.pdf" target="_blank">Cybersecurity RMF Analyst 220</a></li>
    <li class="dc"><a href="http://falconwood.biz/positions/Cybersecurity Operations Analyst 220.pdf" target="_blank">Cybersecurity Operations Analyst 220</a></li>
    <li class="sd"><a href="http://falconwood.biz/positions/Cybersecurity Cloud Engineer 270.pdf" target="_blank">Cybersecurity Cloud Engineer 270</a></li>
    <li class="any"><a href="http://falconwood.biz/positions/ONE NET Cyber Security Analyst 205.pdf" target="_blank">ONE NET Cyber Security Analyst 205</a></li>
    <li class="nola orl arl"><a href="http://falconwood.biz/positions/Senior Cyber Security Analyst PD_1.pdf" target="_blank">Senior Cyber Security Analyst PD_1</a></li>
    <li class="nola"><a href="http://falconwood.biz/positions/Informations Systems Security Officer 250 LA.pdf" target="_blank">Information Systems Security Officer 250 LA</a></li>
    <li class="arl nrfk"><a href="http://falconwood.biz/positions/Information Systems Security Engineer (ISSE- Cloud Systems) 250.pdf" target="_blank">Information Systems Security Engineer (ISSE- Cloud Systems) 250</a></li>
    <li class="sd"><a href="http://falconwood.biz/positions/ISSO CPAC.pdf" target="_blank">ISSO CPAC</a></li>
  </ul>
  <div class="careerLogoContainer engineeringCareerContainer">
    <div class="careerLogo engineeringLogo"></div>
    <h3>Engineering...

CSS

.locationToggle {
    margin-top: 34px;
}
.locationToggle > div {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(165, 49, 49, .5);
    color: white;
    margin-top: 4px;
    border-radius: 6px;
    cursor: pointer;
}
.locationToggle > div:hover {
    background: rgba(165, 49, 49, .6);
}
#importPositions {
  padding-right: 20px;
  padding-top: 30px;
}

#importPositions>ul {
  margin-top: 0;
  padding-left: 46px;
  overflow: hidden;
  max-height: 2000px;
  transition: .7s ease-in-out;
}

#importPositions>ul>li {
  list-style: none;
  padding: 4px 0;
  transition: 0.3s;
  transition-delay: 0.1s;
}

#importPositions>ul.shrinkHeight {
  max-height: 0px;
}

#importPositions>ul>li.fadeIn {
  transform: translateX(0px);
}

@media only screen and (min-width: 1000px) {
  #importPositions>ul {
    column-count: 2;
    column-gap: 8px;
    padding-left: 0;
  }
}
.greyBack {
  background: grey !important;
}

JavaScript

$('#dc').click(function() {
  $('#importPositions > ul > li').hide();
  $('.dc, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#dc').removeClass("greyBack");
});
$('#arl').click(function() {
  $('#importPositions > ul > li').hide();
  $('.arl, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#arl').removeClass("greyBack");
});
$('#nrfk').click(function() {
  $('#importPositions > ul > li').hide();
  $('.nrfk, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#nrfk').removeClass("greyBack");
});
$('#stfrd').click(function() {
  $('#importPositions > ul > li').hide();
  $('.stfrd, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#stfrd').removeClass("greyBack");
});
$('#chrl').click(function() {
  $('#importPositions > ul > li').hide();
  $('.arl, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#chrl').removeClass("greyBack");
});
$('#nola').click(function() {
  $('#importPositions > ul > li').hide();
  $('.nola, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#nola').removeClass("greyBack");
});
$('#orl').click(function() {
  $('#importPositions > ul > li').hide();
  $('.orl, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#orl').removeClass("greyBack");
});
$('#sd').click(function() {
  $('#importPositions > ul > li').hide();
  $('.sd, .any').show();
  $('.locationToggle > div').addClass("greyBack");
  $('#sd').removeClass("greyBack");
});

$('#any').click(function() {
  $('#importPositions > ul > li').show();
  $('.locationToggle > div').removeClass("greyBack");
});