title: How to call a function inside an html hyperlink
body: <p>Okay, I've scavenged quite a few questions on here and I've taken what I could from those but it still seems to not be working. (I am fairly new to JavaScript/jQuery.)</p>
  
  <p>Here is the jsFiddle: <a href="https://jsfiddle.net/5ffhoqpt/1/" rel="nofollow noreferrer">https://jsfiddle.net/5ffhoqpt/1/</a></p>
  
  <pre><code>var showPhotography = function () {
      $(".design").hide();
      $(".film").hide();
      $(".web").hide();
  }
  
  var showDesign = function () {
      $(".photography").hide();
      $(".film").hide();
      $(".web").hide();
  }
  var showWeb = function () {
      $(".design").hide();
      $(".film").hide();
      $(".photography").hide();
  }
  
  var showFilm = function () {
      $(".design").hide();
      $(".photography").hide();
      $(".web").hide();
  }
  </code></pre>
  
  <p>I'm trying to get each link to show only the div's with the corresponding class, and the other ones should be hidden. (I realize now I have forgotten to show the corresponding class to the link name, but that won't fix my issue)I click the link and nothing will be hidden at all and there's no errors in the console so I really don't know where to begin troubleshooting. </p>
  
  <p>The solution must not include #tags as I need the class to be reused on multiple different sections and containers. I also have other working javascript on my site so the linking of jquery can't be an issue. It must be something else within my code preventing all of the working solutions below to work on my site.  </p>