title: Prevent onClick event when selecting text
body: <p>I've got this problem where I need to show and hide divs when clicking on a table cell. However, I also want people to be able to select text and copy it within the cell without hiding the information.</p>
  
  <p>Totally open to changing the design if necessary. :)</p>
  
  <p>Here's a fiddle which demonstrates the issue</p>
  
  <p><a href="http://jsfiddle.net/k61u66ek/1/" rel="noreferrer">http://jsfiddle.net/k61u66ek/1/</a></p>
  
  <p>Here's the HTML code in the fiddle:</p>
  
  <pre><code>&lt;table border=1&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Information
          &lt;/td&gt;
          &lt;td onClick="toggleInfo()"&gt;
              &lt;div id="information" style="display:none"&gt;
                  More information that I want to select without hiding
              &lt;/div&gt;
              &lt;div id="clicktoshow"&gt;
                  Click to show info
              &lt;/div&gt;
  
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here's the javascript:</p>
  
  <pre><code>function toggleInfo() {
      $("#clicktoshow").toggle();
      $("#information").toggle();    
  }
  </code></pre>
  
  <p>Any suggestion/advise is much appreciated!</p>
  
  <p>/Patrik</p>