title: Jquery toggleClass not toggling class
body: <p>I have this div that displays 4 images and I am trying to get this jQuery function so that when I click on the image, it toggles a class which makes the image increase in size. Pretty simple, but I can't figure out why the code isn't toggling the <code>.exampleimgopen</code> class. I have linked the jquery script and all that to my html</p>
  
  <pre><code>&lt;div id="examples"&gt;
      &lt;p&gt;Examples:&lt;/p&gt;
      &lt;img src="img/1.png" class="exampleimg"&gt;
      &lt;img src="img/2.png" class="exampleimg"&gt;
      &lt;img src="img/3.png" class="exampleimg"&gt;
      &lt;img src="img/1.png" class="exampleimg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS for this code is:</p>
  
  <pre><code>#examples {
      background-color:white;
      color:black;
      text-align:center;
      padding:5px 5px 5px 5px;
  }
  
  .exampleimg {
      padding:10px 0px 10px 0px;
      width:300px;
      margin:0 20px 0 20px;
  }
  
  .exampleimg:hover {
      opacity:0.8;
      cursor:pointer;
  }
  
  .exampleimgopen {
      width:600px;
  }
  </code></pre>
  
  <p>And the jQuery for this is:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      $('#examples').click(function() {
          $('.exampleimg').toggleClass('.exampleimgopen');
      });
  });
  </code></pre>