jQuery terms & conditions link

We’ve worked on a few projects recently that require a “I agree with the terms & conditions” checkbox at the bottom of a form or checkout page.

In the “olden days” we’de provide a link to the terms and conditions which would open in a new window or a popup, but in 2013 this feels somewhat clumsy.

Below is a small jQuery plugin we developed which transforms the link into a smarter AJAX call.

The advantages

When clicking the link, the text that populates the box is called via AJAX from the site’s terms & conditions page which you can see here. This means you don’t need multiple terms and conditions in different places.
Because the content is called via AJAX, if the visitor has JavaScript or CSS turned off, visually this solution will remain as intended because the bottom of your form won’t be cluttered with reams of terms & conditions text that you might otherwise try and hide using CSS and “display:none;”
If the visitor has JavaScript turned off, or if they right-click on the link and select to open it in a new window, the link will still function as expected. There’s an argument for adding target=”_blank” to the link in case of the former, but that’s a contentious subject.

The HTML

<form>
   <div><input type="checkbox" /> I agree to the <a href="/jquery-terms.php" id="terms">terms &amp; conditions</a></div>
   <div id="content-area"></div>
</form>

The above is just a very basic example and can be adapted to use fieldsets, labels or whatever else your form needs. Note the link to /jquery-terms.php which is the page containing the actual content.

The CSS

#content-area {
	display:none;
	height:200px;
	overflow:auto;
	margin-bottom:1.5em;
	padding:10px;
	border:solid 1px #d7d7d7;
	color:#505050;
	background-color:#ffffff;
	font-size:90%;
}

The above styles the content area for the terms and conditions and hides it to begin with.

The jQuery

Now, here’s the jQuery plugin that makes it work:

jQuery.fn.terms_agree = function(content_area, selector) {
	var body = $(body);
	$(this).click(function() {
		body.css("height", "auto").css("height", body.height()); // Prevent page flicker on slideup
		if ($(content_area).html() == "") {
			$(content_area).load( $(this).attr("href") + (selector ? " " + selector : "") );
		}
		$(content_area).slideToggle();
		return false;
	});
}

Now you can activate the terms & conditions link like this:

$(function() {
    $("#terms").terms_agree("#content-area", "#small-print");
});

You’ll also need to include the jQuery library in your document:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

To clarify, the first parameter #content-area specifies the area on your form that you want to populate with the content that is retrieved.

The second parameter #small-print is an optional selector from within the external terms and conditions page. This means you can load in a fragment of the page, rather than the whole page itself. This is useful when your terms and conditions page has its own header, navigation and footer that you don’t want to load into the content area of your form.