title: Entire table row clickable except when clicking element within a td with a .class
body: <p>I've made entire rows in my table clickable. Within some of the columns there is show/hide functionality when you click a link for some data e.g. </p>
  
  <pre><code>&lt;td&gt;
      &lt;ul&gt;
      &lt;li&gt;List item 1&lt;/li&gt;
      &lt;li&gt;List item 2&lt;/li&gt;
  ...etc. etc...
      &lt;li class="show-hide"&gt;&lt;a href="#" class="show-hide"&gt;Show more&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Which basically just expands a ul from showing 3 li's to 10...</p>
  
  <p>But because the entire table row is clickable, when I click 'Show more', it goes to the link of the row... and ignores the function of the show/hide.</p>
  
  <p>So what I'd like to achieve is that when a user clicks the link with the class="show-hide" > then ignore the jQuery that sends the user to the link of the entire row...</p>
  
  <p>jQuery to make row clickable</p>
  
  <pre><code>$(document).ready(function($) {
      $(".clickable-row").click(function() {
          window.document.location = $(this).data("href");
      });
  });
  </code></pre>