Clickables is a MooTools plugin that makes list-items clickable to the link inside of the list item.

Download Debut Article Example Usage


Plugin Code (Version 1.0)

var Clickables = new Class({
	Implements: [Options],

	options: {
		elements: 'li',
		selectClass: '',
		anchorToSpan: false
	initialize: function(options) {
		//set options
		//set elements
		this.elements = $$(this.options.elements);
		//set clickable
	//a method that does whatever you want
	doClickables: function() {
		//for all of the elements
		this.elements.each(function(el) {
			//get the href
			var anchor = el.getElements('a' + (this.options.selectClass ? '.' + this.options.selectClass : ''))[0];
			//if we found one
			if($defined(anchor)) {
				//add a click event to the item so it goes there when clicked. 
				//modify anchor to span if necesssary
				if(this.options.anchorToSpan) {
					var span = new Element('span',{
						text: anchor.get('text')
	//ads the click event
	setClick: function(element,href) {
		element.addEvent('click', function() {
			window.location = href;

/* example usage */
window.addEvent('domready', function() {
	var clix = new dwClickables({
		elements: '.block-list li',
		anchorToSpan: true

XHTML List Format

<ul class="block-list">
	<li>Clicking this block will take you to <a href=""></a></li>
	<li>Clicking this block will take you to <a href="">Script&</a>.</li>
	<li>Clicking this block will take you to <a href=""></a></li>
	<li>Clicking this block will take you to <a href=""></a></li>

Options & Events

  • elements: (defaults to all list items) a collection of list items to apply the effect to.
  • selectClass: (defaults to '')the class of the link inside the element that should be used as the list item's URL. If not defined, the first link will be used.
  • anchorToSpan: (defaults to false) turn the anchor into a span so it looks like text?


There are no public methods.

Code Revisions & Bug Fixes