How do make these toggle buttons work a bit better?

Question

I have the following DIV layout which translates as little clickable buttons on the browser:

<div class="ticket_option">
    <div class="tickets">2</div>
    <div class="tickets">3</div>
    <div class="tickets">4</div>    
</div>

Using the following Jquery:

// ticket button stuff
$('.tickets').toggle(function() {

  $(this).addClass('active');

}, function(){

  $(this).removeClass('active');

});

This works a treat... when I click on the div, it adds the 'active' CSS class and I have the desired outcome.

However... what I'm wanting to do is that if one is toggled to the 'active' state and I click on another it removes the 'active' class of all the other DIVs with the class 'tickets' BUT only inside the context of the parent DIV.ticket_option. There are multiple ticket_option's with the same ticket numbers to choose from. Currently with the above code multiple div.tickets can be 'active' within the same div.ticket_option but the aim is to have only 1 active at any point in time.

How does one go about this with the toggle function?

Answer 1

$('.tickets').click(function(){
  $(this).toggleClass('active').siblings().removeClass('active');
});

Also, if you're adding a class to every one of the divs inside ticket_option, then surely .ticket_option div would work better.

Edit: I suppose toggleClass() would work here.

Answer 2

Consider using jQuery UI with the Button plugin in Radio mode: http://jqueryui.com/demos/button/#radio

The HTML markup is "normal" (an <input type="radio">) and the plugin takes care of enforcing the behavior you want.