More!

That's a fjord in the background. We were on our way down after ice climbing. The day before we built an igloo. All seven of us packed like sardines as we slept.

Photo taken by Scott.

Code

Here's the code of the example above.

<div class="more_wrapper">
	<div class="more_content_off" id="image_content">
		<img src="images/image.jpg" />
	</div>
	<div class="more_action" 
		onclick="MORE.toggle(this, 'image_content');">
		more
	</div>
</div>

more.css

Override the styles more_content_off and more_content_on to specify the off and on states of expandable content.

You can also override the other styles. more_action is the toggle link that appears below the content. more_wrapper is the div tag that wraps the content and the toggle link.

.more_wrapper {
	border:4px solid #000;
}
.more_action {
	color:#fff;
	background-color:#000;
	text-decoration:underline;
	cursor:pointer;
}
.more_content_on {
	height:auto;
	overflow:hidden;
}
.more_content_off {
	height:250px;
	overflow:hidden;
}

more.js

This code requires the Prototype Javascript Framework.

// Creates a MoreView object.
// @param offClass	CSS class when in off state.
// @param onClass	CSS class when in on state.
var MoreView = function(offClass, onClass) {
	this.offClass = offClass;
	this.onClass = onClass;
	
	this.offHtml = "more";
	this.onHtml = "less";

	// Toggles whether more or less of the content is shown.
	// @param source	the element that was clicked/source of the action.
	// @param id		id of the content that is toggled.
	this.toggle = function(source, id) {
		if ($(id).hasClassName(this.offClass)) {
			$(id).removeClassName(this.offClass);
			$(id).addClassName(this.onClass);
			source.update(this.onHtml);
		} else {
			$(id).removeClassName(this.onClass);
			$(id).addClassName(this.offClass);
			source.update(this.offHtml);
		}
	};
};

// The default MoreView object ready to use.
// Just override the CSS classes.
var MORE = new MoreView("more_content_off", "more_content_on");