Efecto accordeon con Mootools
Podemos utilizar la librería de Mootools para conseguir el efecto accordeon en nuestros contenidos o menús de navegación.
Lo primero que deberemos hacer para conseguir este efecto es bajarnos la librería de mootools e incluirla en nuestro <head> más el código javascript que consigue el efecto accoredon. También podemos aportar el CSS necesario para los estilos.
<script type='text/javascript' src='js/mootools-core-1.4-full.js'></script>
<script type='text/javascript' src='js/mootools-more-1.4-full.js'></script>
<script type="text/javascript">
window.addEvent('domready', function(){
new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
});
</script>
Y en nuestro <body> los div’s necesarios para conseguir el efecto:
<div id="accordion"> <h2>What is MooTools?</h2> <div> <p>MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.</p> <p>It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.</p> </div> <h2>Cool! What licence does it have?</h2> <div> <p>MooTools is released under the Open Source MIT license, which gives you the possibility to use it and modify it in every circumstance.</p> </div> <h2>What browsers does it support?</h2> <div> <p>MooTools is compatible and fully tested with Safari 3+, Internet Explorer 6+, Firefox 2+ (and browsers based on gecko), Opera 9+, and Chrome 4+.</p> </div> </div>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
I enjoy your writing style genuinely enjoying this internet site. «My best friend is the one who brings out the best in me.» by Henry Ford.