How to replace the '$' short cut

I have been working on this JS that when clicking on menu items the progress bar loads. I feel like it is pretty simple and I have even gotten it to work on codepen: https://codepen.io/anon/pen/ddaNQK

When I have tried to implement this code on my site I keep getting the error: "Uncaught TypeError: $ is not a function at (index):74" I obviously still learning. So dumb down your answers a bit for me. How could I better write this code so that it will also work on my site?

$(function() {
  $(".et_pb_tab_0").click(function() {
    $(".flyarrow")
      .removeClass("second third fourth fifth")
      .addClass("first");
  });
  $(".et_pb_tab_1").click(function() {
    $(".flyarrow")
      .removeClass("first third fourth fifth")
      .addClass("second");
  });
  $(".et_pb_tab_2").click(function() {
    $(".flyarrow")
      .removeClass("first second fourth fifth")
      .addClass("third");
  });
  $(".et_pb_tab_3").click(function() {
    $(".flyarrow")
      .removeClass("first second third fifth")
      .addClass("fourth");
  });
  $(".et_pb_tab_4").click(function() {
    $(".flyarrow")
      .removeClass("first second third fourth")
      .addClass("fifth");
  });
});

body {
  padding: 50px;
}

.flyarrow,
.two {
  width: 100%;
  height: 12vh;
  background: #ddd;
}

.arrow {
  display: block;
  height: 12vh;
  background: linear-gradient(45deg, #00098e 0%, #49bca9 100%);
  color: #fff;
  position: relative;
  width: 200%;
  text-align: center;
  line-height: 40px;
-webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
  transition: all 2s ease-in-out;
  pointer-events: none;
}

.arrow:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: 100%;
  top: 0;
  border: 6vh solid transparent;
  border-left: 25px solid #49bca9;
}

.flyarrow.first .arrow {
  -webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
}

.flyarrow.second .arrow {
  -webkit-transform: translate(-80%, 0px);
  transform: translate(-80%, 0px);
}

.flyarrow.third .arrow {
  -webkit-transform: translate(-70%, 0px);
  transform: translate(-70%, 0px);
}

.flyarrow.fourth .arrow {
  -webkit-transform: translate(-60%, 0px);
  transform: translate(-60%, 0px);
}

.flyarrow.fifth .arrow {
  -webkit-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
}

ul.et_pb_tabs_controls {
  background-color: rgba(0, 23, 43, 0.26);
  height: 12vh;
}

.et_pb_tabs_controls li {
  width: 20%;
  text-align: center;
  display: table;
  float: left;
  position: relative;
  z-index: 11;
  max-width: 100%;
  height: 100%;
  font-weight: 600;
  line-height: 1.7em;
  cursor: pointer;
}

<ul class="et_pb_tabs_controls">
	<li class="et_pb_tab_0">ONE</li>
  <li class="et_pb_tab_1">TWO</li>
  <li class="et_pb_tab_2">THREE</li>
  <li class="et_pb_tab_3">FOUR</li>
  <li class="et_pb_tab_4">FIVE</li>
				</ul>

<div class="flyarrow">
  <div class="arrow"></div>
</div>

Solution

You need to reference the JQuery library prior to attempting to use it. Your CodePen has it referenced if you click the settings button and then the JavaScript tab.

Place this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

in the <head> section of your document.

$(function() {
  $(".et_pb_tab_0").click(function() {
    $(".flyarrow")
      .removeClass("second third fourth fifth")
      .addClass("first");
  });
  $(".et_pb_tab_1").click(function() {
    $(".flyarrow")
      .removeClass("first third fourth fifth")
      .addClass("second");
  });
  $(".et_pb_tab_2").click(function() {
    $(".flyarrow")
      .removeClass("first second fourth fifth")
      .addClass("third");
  });
  $(".et_pb_tab_3").click(function() {
    $(".flyarrow")
      .removeClass("first second third fifth")
      .addClass("fourth");
  });
  $(".et_pb_tab_4").click(function() {
    $(".flyarrow")
      .removeClass("first second third fourth")
      .addClass("fifth");
  });
});

body {
  padding: 50px;
}

.flyarrow,
.two {
  width: 100%;
  height: 12vh;
  background: #ddd;
}

.arrow {
  display: block;
  height: 12vh;
  background: linear-gradient(45deg, #00098e 0%, #49bca9 100%);
  color: #fff;
  position: relative;
  width: 200%;
  text-align: center;
  line-height: 40px;
-webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
  transition: all 2s ease-in-out;
  pointer-events: none;
}

.arrow:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: 100%;
  top: 0;
  border: 6vh solid transparent;
  border-left: 25px solid #49bca9;
}

.flyarrow.first .arrow {
  -webkit-transform: translate(-90%, 0px);
  transform: translate(-90%, 0px);
}

.flyarrow.second .arrow {
  -webkit-transform: translate(-80%, 0px);
  transform: translate(-80%, 0px);
}

.flyarrow.third .arrow {
  -webkit-transform: translate(-70%, 0px);
  transform: translate(-70%, 0px);
}

.flyarrow.fourth .arrow {
  -webkit-transform: translate(-60%, 0px);
  transform: translate(-60%, 0px);
}

.flyarrow.fifth .arrow {
  -webkit-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
}

ul.et_pb_tabs_controls {
  background-color: rgba(0, 23, 43, 0.26);
  height: 12vh;
}

.et_pb_tabs_controls li {
  width: 20%;
  text-align: center;
  display: table;
  float: left;
  position: relative;
  z-index: 11;
  max-width: 100%;
  height: 100%;
  font-weight: 600;
  line-height: 1.7em;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="et_pb_tabs_controls">
	<li class="et_pb_tab_0">ONE</li>
  <li class="et_pb_tab_1">TWO</li>
  <li class="et_pb_tab_2">THREE</li>
  <li class="et_pb_tab_3">FOUR</li>
  <li class="et_pb_tab_4">FIVE</li>
				</ul>

<div class="flyarrow">
  <div class="arrow"></div>
</div>