Paso 1: Estructura HTML.

Primero tenemos que crear la estructura HTML estableciendo los contenidos y secciones para el acorden. ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<h2 class="acc_trigger"> <a href="#">Seccin #1</a></h2> <div class="acc_container"> <div class="block"> <!--Contenido--> </div> </div> <h2 class="acc_trigger"> <a href="#">Seccin #2</a></h2> <div class="acc_container"> <div class="block"> <!--Contenido--> </div> </div> <!--Ms secciones-->

Paso 2: Incluir el CSS.

El siguiente cdigo CSS dara una buena apariencia al acorden. ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<style type="text/css"> .container { width: 500px; margin: 0 auto; } h2.acc_trigger { padding: 0; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 500px; font-size: 2em; font-weight: normal; float: left; } h2.acc_trigger a { color: #fff; text-decoration: none; display: block; padding: 0 0 0 50px; } h2.acc_trigger a:hover { color: #ccc; } h2.active {background-position: left bottom;} .acc_container { margin: 0 0 5px; padding: 0; overflow: hidden; font-size: 1.2em; width: 500px;

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

clear: both; background: #f0f0f0; border: 1px solid #d6d6d6; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .acc_container .block { padding: 20px; } </style>

Imagen: h2_trigger_a.gif

Paso 3: Incluir la librera jQuery y funcin JavaScript.

Incluiremos la librera jQuery y colocamos seguidamente el script que dara la funcionlidad de acorden. ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></sc <script type="text/javascript"> $(document).ready(function(){ $('.acc_container').hide(); $('.acc_trigger:first') .addClass('active') .next() .show(); $('.acc_trigger').click(function(){ if( $(this).next().is(':hidden') ) { $('.acc_trigger') .removeClass('active') .next() .slideUp(); $(this).toggleClass('active') .next() .slideDown(); } return false; }); }); </script>

24 25