title: Need to shorten my JQuery UI JS
body: <p>I'm working on a project where it's an accordion with thumbnails inside and when you click on one a picture shows up next to the accordion. So far I've managed to get it to work using the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!--thumbs---&gt;
  &lt;a id="1a" href="#"&gt;&lt;img src="../../images/thumb/1000.jpg" /&gt;&lt;/a&gt;
  &lt;a id="2a" href="#"&gt;&lt;img src="../../images/thumb/1001.jpg" /&gt;&lt;/a&gt;
  &lt;a id="3a" href="#"&gt;&lt;img src="../../images/thumb/1002.jpg" /&gt;&lt;/a&gt;
  &lt;a id="4a" href="#"&gt;&lt;img src="../../images/thumb/1003.jpg" /&gt;&lt;/a&gt;
  &lt;a id="5a" href="#"&gt;&lt;img src="../../images/thumb/1004.jpg" /&gt;&lt;/a&gt;
  &lt;a id="6a" href="#"&gt;&lt;img src="../../images/thumb/1005.jpg" /&gt;&lt;/a&gt;
  &lt;!--large photos---&gt;
  &lt;img class="hide1" id="1b" src="../../images/fullsize/1000.jpg" /&gt;
  &lt;img class="hide1" id="2b" src="../../images/fullsize/1001.jpg" /&gt;
  &lt;img class="hide1" id="3b" src="../../images/fullsize/1002.jpg" /&gt;
  &lt;img class="hide1" id="4b" src="../../images/fullsize/1003.jpg" /&gt;
  &lt;img class="hide1" id="5b" src="../../images/fullsize/1004.jpg" /&gt;
  &lt;img class="hide1" id="6b" src="../../images/fullsize/1005.jpg" /&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.hide1{
     display:none;
  }
  .show{
     display:block !important;
  }
  </code></pre>
  
  <p>and the JS (under jquery UI):</p>
  
  <pre><code>$(function() {
  $( "#1a" ).click(function() {
          $( ".show" ).toggleClass( "show", 0 );
          return false;
  });
  $( "#1a" ).click(function() {
      $( "#1b" ).toggleClass( "show", 0 );
      return false;
  });
  
  
  $( "#2a" ).click(function() {
      $( ".show" ).toggleClass( "show", 0 );
      return false;
  });
  $( "#2a" ).click(function() {
      $( "#2b" ).toggleClass( "show", 0 );
      return false;
  });
  
  
  $( "#3a" ).click(function() {
      $( ".show" ).toggleClass( "show", 0 );
      return false;
  });
  $( "#3a" ).click(function() {
      $( "#3b" ).toggleClass( "show", 0 );
      return false;
  });
  
  
  $( "#4a" ).click(function() {
      $( ".show" ).toggleClass( "show", 0 );
      return false;
  });
  $( "#4a" ).click(function() {
      $( "#4b" ).toggleClass( "show", 0 );
      return false;
  });
  
  
  $( "#5a" ).click(function() {
      $( ".show" ).toggleClass( "show", 0 );
      return false;
  });
  $( "#5a" ).click(function() {
      $( "#5b" ).toggleClass( "show", 0 );
      return false;
  });
  });
  </code></pre>
  
  <p>Does anyone know a way I can shorten the JS? I have over 100 pics and don't particularly want to do that for all of them unless i have to.</p>