$(document).ready(function() {
	/* Add a "Show all" button before the first FAQ heading */
	$("div.container h2:first").before("<p>Click on any of the questions below to show the answer. <span id=\"showHide\">Show all</span></p>");
	$("#showHide").toggle(function() {
		$(this).text("Hide all");
		$(".faq dt").css("background-image", "url(Images/expandedPanelIcon.gif)");
		$(".faq dd").slideDown();
	}, function() {
		$(this).text("Show all");
		$(".faq dt").css("background-image", "url(Images/collapsedPanelIcon.gif)");
		$(".faq dd").slideUp();
	});

	// Hide all answers except those whose question has the class "show", which should be shown from the outset
	$(".faq dt:not(.show) + dd").hide();
	// Change the icon of any pre-shown questions
	$(".faq dt.show").css("background-image", "url(Images/expandedPanelIcon.gif)");

	$(".faq dt").click(function() {
		// Change the question's icon depending on whether the answer is visible
		if ($(this).next().is(":hidden")) {
			$(this).css("background-image", "url(Images/expandedPanelIcon.gif)");
		} else {
			$(this).css("background-image", "url(Images/collapsedPanelIcon.gif)");
		}
		// Toggle the visibility of the answer
		$(this).next().slideToggle();
	});
});