How to reference a div using id contained in another element?
<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>
