Question

I have two links I use for sorting. One by Make and one by Model(ascending and descending for both).

Right now I have it so when you load up the page you can only see Model Descending and Make descending. If you are to click on lets say Model Descending it hides that link and shows the link for Model Ascending.

Q: I want to make the currently selected column for sorting made Bold once you click it. And unbolded and reset to the original link once another column is selected.

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 you 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