Rob Spinner

by mrjordy

HTML

<div class="TopBannerLeftSquiggly">
  <svg width="21.504505mm" height="45.210079mm" viewBox="0 0 76.197066 160.19319">
    <g transform="translate(-0.79484117,-0.68758742)">
      <path d="m 107.40225,1.1652121 c -35.504638,-0.00245 -71.009275,-0.0049 -106.51391265,-0.00735 0.0342505,0.00705 0.0687095,0.015689 0.10220014,0.024227 0.0910018,0.023199 0.18125711,0.049262 0.27100121,0.07693 2.7e-6,1e-6 5.3e-6,2e-6 8e-6,3e-6 0.3363943,0.1037084 0.6655899,0.2299243 0.9888898,0.3691856 0,0 1.57e-5,6.8e-6 1.57e-5,6.8e-6 1.1947139,0.514624 2.3076695,1.2079235 3.340638,1.9985912 1.9e-6,2.3e-6 4.4e-6,3.7e-6 6.8e-6,5.2e-6 4.1029068,3.1404966 7.273496,7.3491805 9.703618,11.9089035 10e-7,3e-6 10e-7,6e-6 2e-6,8e-6 2.661687,4.994211 2.993831,10.88357 2.993831,16.542785 0,7.232132 -1.104894,14.533884 -3.997345,21.162418 -1.836877,4.209509 -3.956547,8.289117 -5.9372271,12.432906 -2.4e-6,5e-6 -4.9e-6,10e-6 -7.4e-6,1.5e-5 -2.0772249,4.345773 -4.1680039,8.710987 -5.5845273,13.314689 -0.9351186,3.039135 -0.9858476,6.438987 0.4555799,9.273256 1.4846517,2.919259 3.9725299,5.183262 6.3634218,7.421544 7.3446731,6.875865 14.7052691,14.147125 18.9286081,23.278665 0.892271,1.92923 1.550507,3.97695 1.814969,6.08601 -1e-6,10e-6 0,10e-6 2e-6,2e-5 0.198301,1.58145 0.158911,3.18183 0.09553,4.7744 -0.05847,1.46893 -0.100637,2.94932 0.139613,4.39965 0.29228,1.76443 1.005865,3.4411 1.947236,4.96178 2.07692,3.35503 5.284183,5.92406 8.868515,7.57401 l 3e-6,0 1.3e-5,1e-5 0,0 c 3.151768,1.45084 6.553168,2.26493 9.942508,3.00719 l 0,0 c 1.829195,0.40058 3.70359,0.55145 5.571023,0.68971 5e-6,0 1.1e-5,0 1.7e-5,0 l 0,0 c 2.274673,0.1684 4.554251,0.26365 6.834202,0.32939 l 0,0 1.7e-5,0 0,0 c 1.93194,0.0557 3.864539,0.0878 5.797238,0.10091 6e-6,0 1.2e-5,0 1.7e-5,0 0.596982,0.004 1.193977,0.006 1.790972,0.006 l 0,0 c 0.164261,-8e-5 0.328521,-3.5e-4 0.492781,-9.4e-4 0,0 1.7e-5,0 1.7e-5,0 0.04333,-1.5e-4 0.08667,-3.2e-4 0.130002,-5.4e-4 -0.002,1e-5 0.03592,-1.9e-4 0.03393,-1.8e-4 0.0041,-2e-5 0.0083,-5e-5...

CSS

.backgroundcolor {
  background: #f3f5f6;
}

.show {
  display: block
}

.hide {
  display: none;
}

.bluetext {
  color: #3059b3;
}

.greentext {
  color: green;
}

.redtext {
  color: #FF4500;
}

.linkMimic {
  text-decoration: underline;
  cursor: pointer;
}

.linkMimic:hover {
  opacity: .8;
}

.spinner {
  width: 80px;
  height: 300px;
  margin-left: 120px;
  transform-origin: 39px 149px;
  transform: rotate(120deg);
  transition: .5s;
}

.spoke1 {
  position: relative;
}

.circle {
  display: block;
  position: absolute;
  height: 70px;
  width: 70px;
  background: #FF4500;
  border-radius: 40px;
  margin-left: 4px;
  transition: .5s;
}

.triangle {
  border-bottom: 120px solid #FF4500;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  height: 0;
  width: 10px;
  position: absolute;
  margin-top: 28px;
  transition: .5s;
}

.smalltriangle {
  border-bottom: 60px solid #FF4500;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  height: 0;
  width: 10px;
  position: absolute;
  margin-top: 28px;
  transition: .5s;
}

.spoke1 {
  position: absolute;
  width: 70px;
  height: 148px;
}

.spoke2 {
  transform: rotate(120deg);
  transform-origin: 39px 148px;
}

.spoke3 {
  transform: rotate(-120deg);
  transform-origin: 39px 148px;
}

.bigcirclecenter {
  display: block;
  height: 78px;
  width: 78px;
  border-radius: 40px;
  position: absolute;
  margin-top: 110px;
}

.bigcircleouter {
  display: block;
  height: 100px;
  width: 100px;
  border-radius: 60px;
  position: absolute;
  margin-top: 99px;
  margin-left: -11px;
  background: #FF4500;
  transition: .5s;
}

.upsidedown {
  transform: rotate(180deg)
}

.smalltriangle {
  border-bottom: 58px solid #FF4500;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  height: 0;
  width: 32px;
  margin-left: 6px;
  position: absolute;
  margin-top: 45px;
  transition: .5s;
}

.ovalcutout {
  width: 15px;
  height: 53px;
 ...

JavaScript

$('#eccbItem1').click(function() {
  $('#eccbItem1').addClass('SelectedItem').removeClass('ClosedItem');
  $('#eccbItem2, #eccbItem3, #eccbItem4, #eccbItem5, #rfcItem1, #rfcItem2').removeClass('SelectedItem').addClass('ClosedItem');
  $('#eccbItem1content').addClass('show').removeClass('hide');
  $('#eccbItem2content, #eccbItem3content, #eccbItem4content, #eccbItem5content, #rfcItem1content, #rfcItem2content').removeClass('show').addClass('hide');
});
$('#eccbItem2').click(function() {
  $('#eccbItem2').addClass('SelectedItem').removeClass('ClosedItem');
  $('#eccbItem1, #eccbItem3, #eccbItem4, #eccbItem5, #rfcItem1, #rfcItem2').removeClass('SelectedItem').addClass('ClosedItem');
  $('#eccbItem2content').addClass('show').removeClass('hide');
  $('#eccbItem1content, #eccbItem3content, #eccbItem4content, #eccbItem5content, #rfcItem1content, #rfcItem2content').removeClass('show').addClass('hide');
});
$('#eccbItem3').click(function() {
  $('#eccbItem3').addClass('SelectedItem').removeClass('ClosedItem');
  $('#eccbItem1, #eccbItem2, #eccbItem4, #eccbItem5, #rfcItem1, #rfcItem2').removeClass('SelectedItem').addClass('ClosedItem');
  $('#eccbItem3content').addClass('show').removeClass('hide');
  $('#eccbItem1content, #eccbItem2content, #eccbItem4content, #eccbItem5content, #rfcItem1content, #rfcItem2content').removeClass('show').addClass('hide');
});
$('#eccbItem4').click(function() {
  $('#eccbItem4').addClass('SelectedItem').removeClass('ClosedItem');
  $('#eccbItem1, #eccbItem2, #eccbItem3, #eccbItem5, #rfcItem1, #rfcItem2').removeClass('SelectedItem').addClass('ClosedItem');
  $('#eccbItem4content').addClass('show').removeClass('hide');
  $('#eccbItem1content, #eccbItem2content, #eccbItem3content, #eccbItem5content, #rfcItem1content, #rfcItem2content').removeClass('show').addClass('hide');
});
$('#eccbItem5').click(function() {
  $('#eccbItem5').addClass('SelectedItem').removeClass('ClosedItem');
  $('#eccbItem1, #eccbItem2, #eccbItem3, #eccbItem4, #rfcItem1,...