Making jQuery statements shorter

I have the following jQuery statement which works fine but I was wondering if it could be shortened and if making it more concise would speed up performance or not?

The reason for the strange starting tag is that it is for a wordpress theme.

Cheers in advance!

jQuery(document).ready(function($) {

$(".sidebar ol#navigation li.work a").click(function() {
$("#content #second_nav").toggle("fast");
$("#content #second_nav ul.options_3").css('display','none');
$("#content #second_nav ul.options_2").css('display','none');
$("#content #second_nav ul.options_4").css('display','none');
$('.active_2').removeClass('active_2');
$('.active').removeClass('active');
$(this).toggleClass('selected');
});

$("#content #second_nav ul.options li a#work").click(function() {
    $('.active').removeClass('active');
    $(this).attr('class','active');
    $("#content #second_nav ul.options_2").toggle("fast");
    $("#content #second_nav ul.options_4").css('display','none');
    $("#content #second_nav ul.options_3").css('display','none');
    });

$("#content #second_nav ul.options li a#writing").click(function() {
    $('.active').removeClass('active');
    $(this).attr('class','active');
    $("#content #second_nav ul.options_4").toggle("fast");
    $("#content #second_nav ul.options_3").css('display','none');
    $("#content #second_nav ul.options_2").css('display','none');
    $('.active_2').removeClass('active_2');
    });

$("#content #second_nav ul.options_2 li a#collage").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#collage").toggle("fast");
    });

$("#content #second_nav ul.options_2 li a#painting").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#painting").toggle("fast");
    });

$("#content #second_nav ul.options_2 li a#print").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#print").toggle("fast");
    });

$("#content #second_nav ul.options_2 li a#photo").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#photo").toggle("fast");
    });

});

Solution

For performance sake:

it's best to use ID and CLASSES with as few nodes in the selector as possible. If you use an ID, don't specify the tag. So $('#myId'); is much faster than $('a#myId'); as it uses the native javascript getElementById(). If you specify the tag, then it resorts to more complex selection strategies. Also, ID are supposed to be unique in the DOM, so instead of $("#content #second_nav ul.options_2 li a#photo") use $("#photo"); . The shorter, the faster, the better.
Cache your selected DOM elements if you intend to use them more than once:
```
var secondNav= $("#content #second_nav");
secondNav.toggle("fast");
```

For concision, you can specify several elements in the selector if they share the same operation. For instance:

var secondNav = $("#content #second_nav");
secondNav.toggle("fast");
$("ul.options_3, ul.options_2, ul.options_4",secondNav).hide();
$('.active_2').removeClass('active_2');
$('.active').removeClass('active');
$(this).toggleClass('selected');

Hope this helps...