Linking in Bold when you click on jQuery

Question

I have two links that I use for sorting. One according to Make and one according to the model (ascending and descending for both).

I have this now, so when you load the page, you can only see the Descending and Make descending models. If you want to click, say, the Descending model, it hides this link and shows the link for Model Ascending.

Q: I want the selected column to be sorted to be bold as soon as you click on it. Both unbolded and reset to the original link after selecting another column.

HTML:

<a href='#' id='modelD'>Model D</a> <a href='#' id='modelA'>Model A</a> <a href='#' id='makeD' >Make D</a> <a href='#' id='makeA' >Make A</a>​ 

Jquery:

 $('#modelA').hide(); $('#makeA').hide(); $('#modelD').click(function(){ $('#modelD').hide(); $('#modelA').show(); }); $('#modelA').click(function(){ $('#modelA').hide(); $('#modelD').show(); }); $('#makeD').click(function(){ $('#makeD').hide(); $('#makeA').show(); }); $('#makeA').click(function(){ $('#makeA').hide(); $('#makeD').show(); }); 

Here is the fiddle with the code. http://jsfiddle.net/JKFKC/1/

Any help is appreciated. Thanks.

Answer 1

use this

 .css('font-weight', 'bold') 

make code smaller

 $('#modelD, #modelA').click(function() { $('#modelD, #modelA').toggle().css('font-weight', 'bold'); $('[id^=make]').css('font-weight', 'normal'); }); $('#makeA, #makeD').click(function() { $('#makeA, #makeD').toggle().css('font-weight', 'bold'); $('[id^=model]').css('font-weight', 'normal'); }); 

Demo

Answer 2

Define a class for links that go together, such as model . Then, when the model is clicked:

 $(".model").css({"font-weight":"normal"}); // un-bold all the model links $(this).css({"font-weight":"bold"}); // bold the clicked link.