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
No comments:
Post a Comment