show/hide ul li based on id
<p>I would like to show certain <code>li</code> based on id. So when I click on class c1. It will show me just list info about <em>africa</em>. Now it shows every <code>li</code> from demo-agents. This one is "menu". It is a map. After clicking on continent it rolls me down and points on certain <code>li id</code>. So when I click on class c1. It points me to <code>li id="africa"</code> and shows me the text. </p>

<p>But now it shows every <code>li id</code>. I would like to hide all <code>li id africa-s.america</code>. And when I click on class c1 it will show below <code>li id africa</code>.</p>

<pre><code>&lt;div id="map-continents"&gt;
  &lt;ul class="continents"&gt;
    &lt;li class="c1"&gt;&lt;a href="#africa"&gt;Africa&lt;/a&gt;&lt;/li&gt;
    &lt;li class="c2"&gt;&lt;a href="#asia"&gt;Asia&lt;/a&gt;&lt;/li&gt;
    &lt;li class="c3"&gt;&lt;a href="#australia"&gt;Australia&lt;/a&gt;&lt;/li&gt;
    &lt;li class="c4"&gt;&lt;a href="#europe"&gt;Europe&lt;/a&gt;&lt;/li&gt;
    &lt;li class="c5"&gt;&lt;a href="#north-america"&gt;North America&lt;/a&gt;&lt;/li&gt;
    &lt;li class="c6"&gt;&lt;a href="#south-america"&gt;South America&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>and then info </p>

<pre><code>&lt;div id="demo-agents" class="demo-agents-list wrapper"&gt;
  &lt;ul&gt;
    &lt;li id="africa"&gt;&lt;h3&gt;Africa&lt;/h3&gt;&lt;p&gt;Some info about Africa&lt;/p&gt;  &lt;/li&gt;
    &lt;li id="asia"&gt;&lt;h3&gt;Asia&lt;/h3&gt;&lt;p&gt;Some info about Asia&lt;/p&gt;  &lt;/li&gt;
    &lt;li id="australia"&gt;&lt;h3&gt;Australia&lt;/h3&gt;&lt;p&gt;Some info about Australia&lt;/p&gt;  &lt;/li&gt;
    &lt;li id="europe"&gt;&lt;h3&gt;Europe&lt;/h3&gt;&lt;p&gt;Some info about Europe&lt;/p&gt;  &lt;/li&gt;
    &lt;li id="north-america"&gt;&lt;h3&gt;North America&lt;/h3&gt;&lt;p&gt;Some info about North America&lt;/p&gt;  &lt;/li&gt;
    &lt;li id="south-america"&gt;&lt;h3&gt;South America&lt;/h3&gt;&lt;p&gt;Some info about South America&lt;/p&gt;  &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>and js</p>

<pre><code>$(document).ready(function(){
  $('.c1').each(function () {
    if($(this).hasClass('selected')) {
       $('.demo-agents-list wrapper').hide();
       $('.' + $(this).attr('id')).fadeIn(600);
     }
     });
</code></pre>

<p></p>

<p>I hide div in CSS. But Do you have any suggestions? </p>