Question

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 }