jQuery not working

jQuery not functioning properly.

HTML

<body>

  <div id="navBar"><a class="navLink"><strong>Work</strong></a><a class="navLink" id="branding">Branding</a>
  </div>
  <div id="imgGallery">
    <img class="galleryImg branding"  src="img/image-03.jpg">
    <img class="galleryImg ui" src="img/image-03.jpg">
    <img class="galleryImg branding" src="img/image-03.jpg">
    <img class="galleryImg ui" src="img/image-03.jpg">
    <img class="galleryImg branding" src="img/image-03.jpg">
    <img class="galleryImg ui" src="img/image-03.jpg">
    <img class="galleryImg branding" src="img/image-03.jpg">
    <img class="galleryImg ui" src="img/image-03.jpg">
    <img class="galleryImg branding" src="img/image-03.jpg">
    <img class="galleryImg ui" src="img/image-03.jpg">
    <img class="galleryImg branding" src="img/image-03.jpg">
    <img class="galleryImg ui" src="img/image-03.jpg">
  </div>



</body>

CSS

a {
  color: white;
  font-size: 1em;
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
}
body {
  padding: 0px;
  margin: 0px;
}
div {
  margin: 0px;
  padding: 0px;
}
.galleryImg {
  display: inline-block;
  width: 25%;
  margin: 0px;
  padding: 0px;
}
.hidden {
  /* opacity: 0.5; */
  outline: solid 2px red;
}
.navLink{
  display: inline-block;
  padding-top: 22px;
  padding-left: 11px;
}
.branding {
  font-size: 0.75em;
}
#navBar {
  position: fixed;
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 60px;
  width: 100%;
  background-color: #d04b47;
}

JavaScript

$(document).ready(function () {
    "use strict";
    $(".branding").click(function () {
        $("img.branding").removeClass("hidden");
        $("img.ui").addClass("hidden");
        $("img.logos").addClass("hidden");
        $("img.print").addClass("hiden");
    });
    $('.ui').click(function () {
        $('.branding').addClass('hidden');
        $('.ui').removeClass('hidden');
        $('.logos').addClass('hidden');
        $('.print').addClass('hiden');
    });
    $('.logos').click(function () {
        $('.branding').addClass('hidden');
        $('.ui').addClass('hidden');
        $('.logos').removeClass('hidden');
        $('.print').addClass('hiden');
    });
    $('.print').click(function () {
        $('.branding').addClass('hidden');
        $('.ui').addClass('hidden');
        $('.logos').addClass('hidden');
        $('.print').removeClass('hiden');
    });
});