Prevent parent class when child element is clicked

Question

As you will see from the bootply I have created, When you click anywhere in the panel the input becomes active. When I click on the info button (orange icon) it should open an accordion without the parent (input) becoming active. The problem is that the parent still becomes active.

I can solve this by adding:

$('.tickets-more').click(function(){
   event.stopPropagation();
});

But this prevents the info button (orange icon) from working altogether (accordion does not open).

Here is the bootply without the above snippet - http://www.bootply.com/ZKoCxNfMqc and here it is with the snippet - http://www.bootply.com/WW3Ze2DEpg

Answer 1

Just add/remove the class when the target element doesn't have the class info-sign .

Updated Example

$(".ticket-selector").off('click');
$(".ticket-selector").on('click', function(e){
  if(!$(e.target).hasClass('info-sign')) {
    $(".ticket-selector").removeClass("active");
    $(this).addClass("active");
  }
});

..and as others have already said, you should also avoid placing everything inside a label element.