Luke
Luke

Reputation: 67

How to unbind click on element with child that has particular class

I have a number of basic accordion style elements that revel their content on click. However, some of these accordions contain a specific child element () that when present I want the accordion effect to be disabled on this entire accordion element. So if the page has 10 accordion elements and 5 of these contain the child element then these latter accordions should be static - i.e. no slideToggle.

I've been trying stuff like wrapping my code in a conditional such that if the parent does not have a child with a class="normal" then it executes the accordion code else it unbinds the click function from the parent.

function team () {
    if (!$('.accordion').children().hasclass('.normal')) {
        $('.accordion').click(function (e) {
            var $textContent = $(this).find('.content');
            $('.content').not($textContent).slideUp('slow');
            $textContent.slideToggle('slow');
        });
    } else {
        $(this).unbind('click');
    }
}

I have a functioning fiddle of the basic accordion. However, I must be missing something because when I try the above code it doesn't function. Specifically I'm being told that if (!$('.accordion').children().hasclass('.normal')) is not a function

Upvotes: 0

Views: 120

Answers (1)

Sudharsan S
Sudharsan S

Reputation: 15393

Try

$('.content').hide();       
$('.accordion').off('click').on('click', function (e) {
    if(!$(this).find('.normal').length) { // check the condition here
     var $textContent = $(this).find('.content');
     $('.content').not($textContent).slideUp('fast');
     $textContent.slideToggle('slow');
    }
});

Fiddle

Upvotes: 0

Related Questions