title: Simplify this javascript for Show one, Hide Rest
body: <p>I am using a script for a gallery in which clicking on an element in the navigation shows only one div, but hides the others.</p>
  
  <p>Currently my script is very specific, as I need to add a new function for every possible instance. See below... You can imagine this grows out of control easily the more images are added.</p>
  
  <p>Can someone help me make this code more generic and elegant? I'm not very experienced with Javascript/JQuery but this is getting a bit embarrassing lol</p>
  
  <p>So in case it's not clear from the code: the #li1, #li2, #li3 etc are the navigational thumbnails which are always visible. The #img1, #img2, #img3 etc. are the variable displayed divs. When one is visible, the rest should be hidden.</p>
  
  <p>Additional questions:</p>
  
  <ul>
  <li><p>for every #img1 displayed, I'd like to also show a title in a separate div, let's say #title1, #title2, etc. How do I do this? So eg clicking #li1 would show #img1 and #title1 but hide all other #img.. and #title..</p></li>
  <li><p>all #'s contain images. I've noticed that when one of the images is broken, the whole script stops working properly (all #img.. divs show at once). Why is that?</p></li>
  <li><p>this script doesn't actually hide all the images until everything is loaded, which you don't notice when running the HTML locally, but you do when you're waiting for the images to download. I'm suspecting because the $("#li1").load(function() refers to a div that is further down in the document. How can I counter this?</p></li>
  </ul>
  
  <p>I hope I'm not asking too much, I've tried to understand this myself but I can't figure it out.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#li1").load(function() {
     $("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0, #intro").hide();
     $("#img1").show();
  });
  $("#li1").on('click', function() {
     $("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
     $("#img1").show();
  });
  $("#li2").on('click', function() {
     $("#img1, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
     $("#img2").show();
  });
  $("#li3").on('click', function() {
     $("#img2, #img1, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
     $("#img3").show();
  });
  
  etc.</code></pre>
  </div>
  </div>
   </p>