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&nbsp;3+, Internet Explorer&nbsp;6+, Firefox&nbsp;2+ (and browsers based on gecko), Opera&nbsp;9+, and Chrome&nbsp;4+.</p>

    </div>

</div>

Ver el ejemplo en funcionamiento

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!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (No hay votos)
Cargando…
Comparte en las redes sociales

Una respuesta a “Efecto accordeon con Mootools”

  1. Marcia Valls dice:

    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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre