title: How to reference a div using id contained in another element?
body: <p>I have an alphabetical index that when clicked unhides a div that contains it's content.</p>
  
  <p>Here is the HTML so I can explain properly:</p>
  
  <pre><code>&lt;ul class="index"&gt;
      &lt;li&gt;A&lt;/li&gt;
      &lt;li&gt;B&lt;/li&gt;
      &lt;li&gt;C&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="index-A" class="hide"&gt;A contents&lt;/div&gt;
  &lt;div id="index-B" class="hide"&gt;B contents&lt;/div&gt;
  &lt;div id="index-C" class="hide"&gt;C contents&lt;/div&gt;
  </code></pre>
  
  <p><strong>When a letter is clicked, I want to unhide it's content div and also hide any other ones that are visible.</strong></p>
  
  <p>How could I do that?</p>
  
  <p>Here is what I have been trying, but am stuck at this point:</p>
  
  <pre><code>$('.index li').click(function(e) {
      // somehow reference the content div using: "index-" + $(this).text()
  });
  </code></pre>