Joe Song

Sometimes the API docs are wrong.

Since I couldn’t find out how to do it, I’ll post the secret here. To make the horizontal accordion work in Mootools 1.2 you have to specify a fixed width. The API docs say it is a Boolean, but it ain’t. It is what the plugin uses to determine the size of open panels.

Markup:

<ul id="get-started-steps">
	<li class="get-started-step"> <a class="trigger left" href="#">Step 1</a>
		<div class="get-started-content left">step 1 content</div>
	</li>
	<li class="get-started-step"> <a class="trigger left" href="#">Step 2</a>
		<div class="get-started-content left">step 2 content</div>
	</li>
	<li class="get-started-step"> <a class="trigger left" href="#">Step 3</a>
		<div class="get-started-content left">step 3 content</div>
	</li>
</ul>

JS:

<br />
new Accordion(<br />
$$(’.get-started-step .trigger’),<br />
$$(’.get-started-content’),<br />
{<br />
height: false,<br />
width: true,<br />
fixedWidth: 200<br />
});<br />

CSS:

<br />
#get-started-steps { width: 100%; }<br />
#get-started-steps li { float: left; }<br />
.get-started-content { width: 200px; height: 200px; }<br />
.left { float: left; }<br />