Entire table row clickable except when clicking element within a td with a .class
<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>