title: Javascript/jQuery on click one element stay other disappears
body: <p>How i can make when im click on one html element others disappear, for example if i had 5 pictures i click on one, and other 4 get hidden? Is there anyway to do this with for or while loop? </p>
  
  <p><strong>EDIT</strong> : My HTML code</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My Site&lt;/title&gt;
      &lt;link rel="Stylesheet" type="text/css" href="style.css" /&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js " type="text/javascript"&gt; &lt;/script&gt;
  &lt;/head&gt;
   &lt;body&gt;
  
      &lt;div id="header"&gt;
                  &lt;ul id="navigation"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;                
                  &lt;/ul&gt;
              &lt;/div&gt;
      &lt;center&gt;
      &lt;h1 class="h1"&gt;Hello User!&lt;/h1&gt;
      &lt;/center&gt;&lt;br /&gt; &lt;br/&gt; &lt;br/&gt;
                 &lt;p class="category"&gt;Category 1&lt;/p&gt;
      &lt;hr/&gt;
          &lt;ul id="catitem"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;test2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;test3&lt;/a&gt;&lt;/li&gt;                  
          &lt;/ul&gt;
  
   &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>When user click on <li> test1 </li> im want other <li> gets hidden</p>