title: Getting Error on Codepen: Uncaught ReferenceError: $ is not defined
body: <p>getting the below error on codepen. Not sure what's happening. What exactly is not defined and what should I change?</p>
  
  <p><a href="https://i.stack.imgur.com/CDKcD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CDKcD.png" alt="error on codepen"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $("#btnHideBanana").click(function() {
      $("#banana").collapse("hide")
    });
    $("#btnShowBanana").click(function() {
      $("#banana").collapse("show")
    });
  });
  $(document).ready(function() {
    $("#btnHideMonkey").click(function() {
      $("#monkey").collapse("hide")
    });
    $("#btnShowMonkey").click(function() {
      $("#monkey").collapse("show")
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/ganiya/pen/MWKWjKX?editors=1010" rel="nofollow noreferrer">https://codepen.io/ganiya/pen/MWKWjKX?editors=1010</a></p>