Question

I am trying to pop up a box when a div or any of its first level children are clicked, excluding one A tag that is in a child div.

I am simply switching classes to show/hide the div which works great. However, when the link is clicked the box still pops up which I dont want. I have looked at using target and stoppropagation but I cannot get it to work with my code.

jQuery:

jQuery(document).ready(function() {
    jQuery(".video_odd").toggle(function()
    {
    jQuery(this).children(".video_desc_box").attr('class', 'video_desc_box_open');
    },
    function(){
    jQuery(this).children(".video_desc_box_open").attr('class', 'video_desc_box');
    });
});

Quick HTML overview: video_odd is the class that when it is clicked it will cause its child div video_desc_box to switch its class to video_desc_box_open which changes display to inline instead of none.

I just don’t understand how to use toggle to get this script to not run when a link is clicked which is a div inside video_odd.

I want it to change classes when any other childen is clicked, just not the 2nd level child link.

Thanks for the help!

EDIT: I think I am getting closer:

jQuery(".video_odd").toggle(function(e)
{
if (e.target == jQuery(this).children(".video_list_title")) { return; }
jQuery(this).children(".video_desc_box").attr('class', 'video_desc_box_open');
},
function(){
jQuery(this).children(".video_desc_box_open").attr('class', 'video_desc_box');
});  

However

(e.target == jQuery(this).children(".video_list_title"))

Is not registering. How can I have it exclude the div video_list_title all together (not just the link?)

Answer 1

e.target is not a jQuery.

$(e.target).hasClass(“video_list_title”)

Is a lot closer!