title: jquery hide/show divs troubleshooting
body: <p>I have a series of links to hide/show six different divs.  I want the page to load where all of the six divs are hidden.  Upon clicking on one of the six links, the respective div should fade in.  When clicking on any of the other links, the current should fade out, and the newly selected div should appear.</p>
  
  <p>Here is the start of the jQuery script that I placed just inside the opening body tag:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $("#1").on('click', function() {
     $(this).fadeOut();
     $("#Graphics, #Jury, #Witness, #Mock, #Continuing").fadeOut();
     $("#Strategy").fadeIn();
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>Here are the links: </p>
  
  <pre><code>&lt;a href="#Strategy" id="1"&gt;Strategy &amp;amp; Theme Development&lt;/a&gt;
      &lt;a href="#Graphics" id="2"&gt;Graphics&lt;/a&gt;
      &lt;a href="#Jury" id="3"&gt;Jury Selection&lt;/a&gt;
      &lt;a href="#Witness" id="4"&gt;Witness Preparation&lt;/a&gt;
      &lt;a href="#Mock" id="5"&gt;Mock Trials &amp;amp; Focus Groups&lt;/a&gt;
      &lt;a href="#Continuing" id="6"&gt;Continuing Legal Education&lt;/a&gt;
  </code></pre>
  
  <p>These are the target divs:</p>
  
  <pre><code>&lt;div id="Strategy"&gt;&lt;/div&gt;
  &lt;div id="Graphics"&gt;&lt;/div&gt;
  &lt;div id="Jury"&gt;&lt;/div&gt;
  &lt;div id="Witness"&gt;&lt;/div&gt;
  &lt;div id="Mock"&gt;&lt;/div&gt;
  &lt;div id="Continuing"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure if the links to the divs override the jQuery effect or not.</p>