jQuery is a javascript frame­work that makes it easy to do pro­gram­matic ani­ma­tion, event han­dling, and AJAX style inter­ac­tions. It vastly sim­pli­fies web pro­gram­ming and the manip­u­la­tion of web pages. You don’t need to be a pro­gram­mer to use jQuery. I’ll be post­ing ideas and exam­ples of how to use jQuery over the com­ing months.

On Sidearm I use jQuery for sev­eral effects. For this post, I’m going to start with my favorite one. On the side­bar to the right each sec­tion is collapsable/expandable and can be tog­gled by acti­vat­ing the small plus/minus sym­bols. The side­bar keeps get­ting big­ger and in a few years the archive alone will take up a large por­tion of the screen, so sav­ing space is becom­ing increas­ingly nec­es­sary. At the same time, I don’t want to make nav­i­gat­ing the site any more dif­fi­cult than it needs to be, so I made “smart” default set­tings for which sec­tions should load in the col­lapsed state. Also, to be true to the orig­i­nal design, I wanted the side­bar to always be shorter than the con­tent area. To accom­plish this I used jQuery to mea­sure the height of the con­tent area and the side­bar, com­pare them, and then col­lapse the appro­pri­ate amount of sec­tions to keep the side­bar shorter.

One of the best fea­tures of jQuery is that you can select an HTML object by HTML tag, ID, or class the same way you would in CSS. In the fol­low­ing exam­ple, H5 ele­ments with a class are selected, then the “.append” func­tion is called which adds the ele­ment found within paren­the­sis, in this case “<a></a>”.

// dynamically add sidebar toggle buttons
$('h5.categories').append('<a></a>');
$('h5.archives').append('<a></a>');
$('h5.audio').append('<a></a>');
$('h5.audio + div').hide();
$('h5.audio a').addClass('expand');
$('h5.links').append('<a></a>');
$('h5.connect').append('<a></a>');
By adding these in dynamically, we effectively hide the toggle buttons from anyone who doesn't have javascript support, which we want to do because the collapse function wouldn't work for them anyways.
In the following example, I'm assigning the value of #content_one's height to the variable "c_one" and likewise for #content_two and "c_two".
// get height of column one and column two
var c_one = $('#content_one').height();
var c_two = $('#content_two').height();

Next, these variables need to be compared. To do this, an "if" statement is used along with a some comparative math. Our statement is saying "if c_two is greater than or equal to c_one then execute the code within the brackets."
// compare heights and collapse the appropriate amount of sections
// Note: This code could be improved and I welcome suggestions, but it works.
if(c_two >= c_one) {
	$('h5.connect + ul').hide();
	$('h5.connect a').addClass('expand');
	c_two = $('#content_two').height();
	if(c_two >= c_one) {
		$('h5.links + ul').hide();
		$('h5.links a').addClass('expand');
		c_two = $('#content_two').height();
		if(c_two >= c_one) {
			$('h5.archives + ul').hide();
			$('h5.archives a').addClass('expand');
			c_two = $('#content_two').height();
			if(c_two >= c_one) {
				$('h5.categories + ul').hide();
				$('h5.categories a').addClass('expand');
			}
		}
	}
}

Lets go over the first three lines inside the brackets. Line one hides the Connect UL element, effectively loading it in the collapsed state. Line two changes the toggle button from it's default "collapse" state to the "expand" state because we've already collapsed it. And, line three measures the sidebar's updated height for further comparison. After that section is evaluated, each subsequent section is measured and collapsed until c_two is smaller than c_one.
For more information about jQuery head to the site and dig into the documentation. You won't believe how easy it is to get started.