title: Adding a class to a div by clicking on another div
body: <p>I'm trying to build a website with a sidebar. When I click on an item in the sidebar, I want the text belonging to that topic to appear. </p>
  
  <p>So far, I have this html in the body:</p>
  
  <pre><code>&lt;nav class="menu"&gt;
   &lt;ul&gt;
    &lt;li class="kategorie" id="links"&gt;
        &lt;a href=#&gt;Links&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="kategorie" id="kontakt"&gt;
        &lt;a href=#&gt;Kontakt&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="kategorie" id="fotos"&gt;
        &lt;a href=#&gt;Fotostrecke&lt;/a&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div class="text"&gt;
   &lt;h2&gt;
      Fotos
   &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following css:</p>
  
  <pre><code>.menu {
    float:left;
    width: 300px;
    background-color:white;
  }
  
  .text {
    opacity:0;
    float:left;
    background-color:white;
    position:absolute;
    left:350px;
    right:0;
    text-align:left:;
    font-family: Myriad Pro, sans-serif;
  }
  
  .visible {
    opacity:1;
  }
  </code></pre>
  
  <p>I have added the following code in the head:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;
  $(function() {
    $("#fotos").click(function() {
      $(".text").addClass('visible');
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But it still doesn't work. I'm still very much a beginner at jquery, so I suspect that's where the mistake is, but I can't find it.</p>