Code Clean Up

Code Clean Up

Sorry if this looks a mess. It does work but seems a little long-winded. What can I do to clean it up and make it more concise? I am trying to toggle the style of 4 input buttons in a form. Option1 is set to display the active style on page load. Clicking a button makes it active(on) and the others inactive(off).


  1. jQuery(document).ready(function() {
  2.         jQuery("#option1").removeClass("passive").addClass("active");
  3.         jQuery("#option1").click(function(){
  4.             jQuery("#option1").removeClass("passive").addClass("active");
  5.                 jQuery("#option2, #option3, #option4").removeClass("active").addClass("passive");
  6.         });
  7.         jQuery("#option2").click(function(){
  8.             jQuery("#option2").removeClass("passive").addClass("active");
  9.                 jQuery("#option1, #option3, #option4").removeClass("active").addClass("passive");
  10.         });
  11.         jQuery("#option3").click(function(){
  12.             jQuery("#option3").removeClass("passive").addClass("active");
  13.                 jQuery("#option1, #option2, #option4").removeClass("active").addClass("passive");
  14.         });
  15.         jQuery("#option4").click(function(){
  16.             jQuery("#option4").removeClass("passive").addClass("active");
  17.                 jQuery("#option1, #option2, #option3").removeClass("active").addClass("passive");
  18.         });
  19. });
Thanks if you feel like replying!

A