title: HTML and JavaScript not working as wanted
body: <p>Hello I have created this script but it is not working as wanted:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          $('.textWord_about').hide();
  
          $('.link').click(function() {
          $('.textWord_about').hide();       
          $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
          width: '200px'
          }, 300);
          });
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
  &lt;div style="float: left; width: 100%; height:100%;" &gt;
          &lt;div style="float: left; width: 33%; height:100% "&gt;
              &lt;table&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;a class="link" href="#about" data-link="82"&gt;Unit 1&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;a class="link" href="#about" data-link="158"&gt;Exam1&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt; 
  
          &lt;div style="float: left; width: 33%; height:100%; " &gt;
  
              &lt;div class="textWord_about" data-link="82" &gt;Overview   Vocabulary   Text   Homework   Homework2   Grammar   A_Vocabulary   &lt;/div&gt;
              &lt;div class="textWord_about" data-link="158" &gt;ExamA   Exam2   &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It is supposed to change the content when you press Unit 1 or Exam 1.
  I don't know why it is not working. The strange thing is that I copied and pasted everything in <a href="http://jsfiddle.net/CLVF3/" rel="nofollow">http://jsfiddle.net/CLVF3/</a> and it is working in the fiddle! I think I have done something wrong with the JavaScript part.  </p>