user2736203 user2736203 - 1 month ago 4
jQuery Question

Entire table row clickable except when clicking element within a td with a .class

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.

<li>List item 1</li>
<li>List item 2</li>
...etc. etc...
<li class="show-hide"><a href="#" class="show-hide">Show more</a></li>

Which basically just expands a ul from showing 3 li's to 10...

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.

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...

jQuery to make row clickable

$(document).ready(function($) {
$(".clickable-row").click(function() {
window.document.location = $(this).data("href");


Catch the event and read its properties. By this way you can identify what is you clicking right now.

$(document).ready(function($) {
    $(".clickable-row").click(function(event) {
        if(!$('show-hide')) {
           window.document.location = $(this).data("href");

See it working: