This was a project for skiracing.com, a page showing the team members and giving their backgrounds and contact information. The design was provided to me as a psd and various png images by their designer, and I had to implement that design with all the additional functionality they described.

Originally the team had simply given me a google spreadsheet with team's information and asked me to hardcode the page. I realized that this wouldn't be the best option for them, since it would force them to consult a programmer every time they wanted to make changes to any of the content. So I decided I would incorporate these into their Wordpress setup by making a custom content type called "About Us Contact" and allowing them to create and edit posts that would be output to the page.

They already had a plugin called Custom Content Type Manager, and it was easy to create the needed type with all the necessary fields. The more involved part was querying for that type on the page, and outputting them properly, but it still wasn't really at all difficult.

The query and fetch itself:

$contactArray = new WP_Query( array('post_type' => 'about-us-contact', 'posts_per_page' => -1,
				'order' => 'ASC', 'orderby' => 'menu_order') );
$contactArray = $contactArray->get_posts();

Then it was a matter of outputting the data in a way that would allow the "opening" animation when the pictures were clicked. I wanted to minimize the amount of javascript and styling used on this page, for maintainability, cross-browser compatibility, and performance. So for each row of four pictures, the corresponding four items of bio information would have to be output directly after them in the source order. This series of loops achieved that:

while ($rowOfFourArray = array_splice($contactArray, 0, 4)) {
	foreach ($rowOfFourArray as $person) {
		$personMeta = get_post_meta($person->ID);
		// ... outputting the html for the pictures ...
	}
	foreach ($rowOfFourArray as $person) {
		$personMeta = get_post_meta($person->ID);
		// ... outputting the html for the bio information
	}
}

Although the duplication of effort by these two loops is unfortunate, it allows the animation and styling to be very simple. And since the number of items being iterated is very small, and with no realistic opportunity to get much higher than 10 or so, an increase in running time from O(N) to O(2N) isn't a serious loss.

The animation was fairly simple to achieve without any complex javascript. The animation itself could be achieved with only css:

.about-us-contact {
	max-height: 0;
	overflow: hidden;
	&.show {
		max-height: 1000px;
	}
	transition: all 0.5s ease;
	// ... prefixed versions of transition ...

	// ... further styling ...
}

So all I needed to accomplish with javascript was adding the .show class to the bio information in question. I used a data-person-email property on both the picture and the bio information blocks to let the javascript know which bio information to reveal, and I also used this opportunity to add a .highlighted class to the picture in question so the user would be able to hide the information again by clicking on the same picture.

about_us_animations.init = function() {
	$('.about-us-person-tile').on('click', function () {
		var personEmail = $(this).data('person-email');

		// if the person email of this tile corresponds to the one that is currently open.
		var openPerson = $('.about-us-contact.show');
		if (openPerson.data('person-email') == personEmail) {
			openPerson.removeClass('show');

			$(this).removeClass('highlighted');
		}
		else {
			openPerson.removeClass('show');
			$('.about-us-contact[data-person-email="' + personEmail + '"]').addClass('show');

			$('.about-us-person-tile.highlighted').removeClass('highlighted');
			$(this).addClass('highlighted');
		}
	});
}

This was a simple project that added a fair amount of value to the skiracing.com site, by showing a personal side to the team and allowing the users easy access.