Adding Mootools effect to your pages you can make your site more attractive. Take a look at the toggle effect.
My friend Tom asked to me how to add the same mootools toggle effect (present on this post about Sliding top panel using mootools) to my previous post about liquid expandable section with rounded corners.
Live preview 
Download this tutorialStep 1: HTML Code
HTML code is very simple (for more info and take a look here):
<h2><span>
<a href="#" id="toggle">My Section</a>
</span></h2>
<div id="section">
<div>
<!-- Your content here -->
</div>
</div>
<a href="#" id="toggle">My Section</a>
</span></h2>
<div id="section">
<div>
<!-- Your content here -->
</div>
</div>
Step 2: add mootools toggle effect
Add a link to mootools framework in the <head> tag of your page:
<script type="text/javascript" src="mootools.svn.js"></script>
... then add below the following code:
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('section');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('section');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
In this way, when an user click on the section header the section body will collapse top/down.
Download this tutorialRelated Content
Sliding top panel using mootools
Liquid expandable section with rounded corners using CSS
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
Your third script example has a leading > which should be a <. Otherwise, great stuff! Very attractive result.
@cssnewbie: Thanks!
I love this effect!
Awesome!
Nice work again Antonio!
But there's one thing that's even better w/ this effect. How can you add an image to this effect such as a minus sign when it's fully expanded and a plus sign when it's closed?
I'd appreciate any help you can provide.
Thanks!
What mootools components were used to create this?
Works great, looks great! How can I start with a closed section? Thanks! oli
mySlide.hide();
Can you change the orientation of the slide - i.e. horizontal?
Example - some ideas for using it. I hope they like. Download Idea
I hope that can help them succeed or give you ideas for crer beautiful things even ams
Can someone invert the process? How to do that the div despliege? (That is opened instead of being closed)
Thank you very much
yes! is it possible to reverse the effect????
Is there anyway one can use it to toggle from the left to the right?
Wonderful tool otherwise!
how do you create the reverse effect. as in you press the header the item drops down.
many thanks in advance
How to reverse the effect?