title: Click function image caption Jquery not working
body: <p>I'm trying to use this piece of code to reveal image captions of multiple images using a single link on a page. I've updated the code from a mouseenter function to a click function and added a new caption toggle that should reveal any captions associated with each image. </p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function () {
      $(".thumb").click(function () { //replaced to click 
          var $t = $(this);
          var $d = $("&lt;div&gt;");
          $d.addClass("desc").text($t.attr("alt")).css({
              width: $t.width(),
              height: $t.height() - 20,
              top: $t.position().top
          });
          $(this).find('.caption').toggleClasss('hidden '); //added caption toggle
          $t.after($d).fadeTo("fast", 0.3);
          $d.click(function () { //replaced to click 
              $(this).fadeOut("fast", 0, function () {
                  $(this).remove();
              }).siblings("img.thumb").fadeTo("fast", 1.0);
          });
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img class="thumb" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQidl6KX2jRWNeCA6jT_TjWG7NlI3aRiB_AcDsA9Y5owS2cr9G6" alt="Nice painting"&gt;
  &lt;a class="caption" href="#"&gt;Click Me!&lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.thumb {
      cursor: pointer;
  }
  .desc {
      cursor: pointer;
      position: absolute;
      color: #000;
      text-shadow: 0 0 5px 2px #fff;
      z-index: 1;
      text-align: center;
      padding: 10px 0;
  }
  .hidden {
      display:none;
  }
  </code></pre>
  
  <p>Here's the code in action. <a href="http://jsfiddle.net/hJMXa/" rel="nofollow">http://jsfiddle.net/hJMXa/</a></p>
  
  <p>I'm pretty new to Jquery and I've sort of exhausted all the options that I could think of. Any suggestions??</p>