Reset state of button

Question

Hi, on my website I have 4 css styled buttons in the header of a table. When each button is clicked it currently changes the css correctly as per the below script (the below code may not be the easiest/most efficient way I am achieving this result).

What I would like to achieve is something similar to a radio button in that when each of the 4 buttons are clicked the amended class is reset on the previously clicked button.

JQUERY:

$(document).ready(function(){
    $(".red-btn.pcb").click(function(){

        $(this).removeClass("red-btn");

        $(this).addClass("redsort-btn");

    });
        $(".blue-btn.pcb").click(function(){

        $(this).removeClass("blue-btn");

        $(this).addClass("bluesort-btn");

    });


        $(".green-btn.pcb").click(function(){

        $(this).removeClass("green-btn");

        $(this).addClass("greensort-btn");

    });


         $(".orange-btn.pcb").click(function(){

        $(this).removeClass("orange-btn");

        $(this).addClass("orangesort-btn");

    });

});

HTML:

 <th><a class="red-btn pcb"><span> Red </span> </a><th>
 <th><a class="blue-btn pcb"><span> Blue </span> </a><th>
 <th><a class="green-btn pcb"><span> Green </span> </a><th>
 <th><a class="orange-btn pcb"><span> Orange </span> </a><th>

Answer 1

If you can turn 'sort' into it's own class, you could do something like the following:

$("a.pcb").click(function(){
  $(this)
    .addClass("sort").closest("th").siblings("th")
    .find("a").removeClass("sort");
});

And then modify your CSS slighty:

.orangesort-btn  { font-weight:bold }

to

.orange-btn.sort { font-weight: bold }

Answer 2

Why not use a combination of CSS and jQuery to do this? You'll have less to keep track of.

Change your HTML to:

<th><a class="red-btn pcb sort"><span> Red </span> </a><th>
<th><a class="blue-btn pcb"><span> Blue </span> </a><th>
<th><a class="green-btn pcb"><span> Green </span> </a><th>
<th><a class="orange-btn pcb"><span> Orange </span> </a><th>

Where you add "sort" as a class to the one you want highlighted. Then you can use the following jQuery:

$(document).ready(function(){
    $("a.pcb").click(function(){
        $("a.pcb").removeClass("sort");
        $(this).addClass("sort");

    });
});

I'm assuming a.pcb class is unique to these buttons. Then in the CSS you just need to define the normal and "sort" states for each (which you are basically already doing):

a.red-btn {
   color: red;
}

a.red-btn.sort {
   font-weight: bold;
}

Dunno what your styles look like but you should get the idea. Heck if your active state has the same effect (just bolds stuff, etc) you could get even slicker and only need one sort class definition:

a.red-btn {
   color: red;
}

a.blue-btn {
   color: blue;
}

a.pcb.sort {
   font-weight: bold;
}

Answer 3

Ok I am using a sliding doors style button called "Pure CSS btns" (http://www.halmatferello.com/lab/pure-css-btns/)

The CSS is slightly modified as below:

.pcb, .pcb span {
    background: url('/_img/secondary-amended.png') no-repeat;
    height: 23px;
    line-height: 23px;
    padding: 3px 0 7px 0;
}

.pcb, a.pcb:link, a.pcb:visited {
    color: #333;
    font-size: 11px;
    padding-left: 14px;
    text-decoration: none !important;
}
/* ie 6 hack */
* html div#frame .pcb {
    color: #333;
    padding-top: 0px;
    padding-bottom: 0px;
    text-decoration: none;
}
/* ie 7 hack */
*:first-child+html .pcb {
    color: #333;
    padding-top: 0px;
    padding-bottom: 0px;
    text-decoration: none;
}

.pcb span {
    background-position: right -326px;
    padding-right: 14px;
}


/*Normal State - Red*/
a.red-btn  {
    background-position: left -109px;
    color: #fff !important;
    padding-top: 3px;
    font-weight: bold;
}
a.red-btn span {
    background-position: right -435px;
    padding-top: 3px;
}
a.red-btn:hover {
    background-position: left -137px;
}
a.red-btn:hover span {
    background-position: right -463px;
}


/*Clicked State - Red*/

a.redsort-btn  {
    background-position: left -219px;
    padding-top: 3px;
}
a.redsort-btn span {
    background-position: right -545px;
    padding-top: 3px;
}
a.redsort-btn:hover {
    background-position: left -246px;
}
a.redsort-btn:hover span {
    background-position: right -572px;
}