First, we set up the HTML. We use an<a> tag as the trigger. When clicked it will either hide or show the #panel div depending on its visibility.

<a href="#">Toggle div</a>
<div id="panel">
<!-- Div content -->
</div>

We give the #panel div some simple styles by changing its background color to gray and giving it a black border. This step is optional but it makes it easier to see the transition.

#panel {
background-color:#ccc;
border:1px solid #000;
}

Moving on to MooTools. First, we declare a variable that holds the<a> element. This makes it easier to reference in our code. We also immediately set the opacity of the #panel div to 0.

// target is the div we hide or show
var target = $('panel');
// Hide div immediately
target.setStyle...