Remove/stop active class from parent when child class within div is clicked

0
votes
<div class="ticket-selector active">
    <p>
        <a data-toggle="collapse" data-parent="#ticket-panel" href="#collapseOne" class="tickets-more"><span class="halflings info-sign orange"></span></a>
    </p>
    <div id="collapseOne" class="collapse in" style="height: auto;">
        <p>
            Anim pariatur cliche reprehenderit
        </p>
    </div>
</div>

So, when the ".ticket-selector" div is clicked it becomes active. Inside the Div there is a child class that triggers an accordion, the class is ".tickets-more". However, when this child element is clicked I do not want the parent to be active. Anywhere else in the div is ok to show the active class on parent but just not the child class.

4
javascriptjqueryhtml
event.stopPropagation() - VisioN
Is tickets-more a direct child of the active div? Since it's not present in your demo code. Ah Fiddle would be nice as well. - timo
Thanks all. This does stop the active from appearing, but it also stops the .collapse from becoming .collapse in - basically the accordion stops working (child class). Its bootstrap accordion - goo.gl/TOcMzT - Tom Rudge
$('.tickets-more').click(function(){ event.stopPropagation() $(".collapse").addClass("in"); }); - Tom Rudge
The above opens all of the childrens accordions up - Tom Rudge

4 Answers

0
votes

Try using following code in your onClick event handler for child element,

event.stopPropagation();
0
votes

The event handler should receive a parameter

...click(function(e){ ...

Then use that parameter as the event

e.stopPropagaiton();
0
votes
$('.ticket-selector').click(function(event){
    event.stopPropagation();
    // your code
});
0
votes

if( $(this).parent().hasClass('active') ) {$(this).parent().removeClass('active');}