Texto en acordeón para web

Atrea escrito el 29.12.AM a las 11:32 horas

MAGIX Web Designer 10 Premium. Hola me estoy volviendo loco pues no se como para conseguir el código o de que manera se hace lo mismo que hace lo de la flecha de arriba "seleccione una categoría" que cuando le das sale texto para elegir uno o que salga el texto que tu quieras para que lo lean y a la vez se hace mas grande la pagina web sin afectar a los siguientes textos y si le vuelves a dar a la flecha se esconde el texto que pongamos y la pagina vuelve a estado normal de tamaño. subo un ejemplo por favor ayuda. también esta donde escribe el moderador Carlos, Modificado por última vez por Carlos     el 31/03/2014, 15:15 Horas, modificaciones en total: 1

Firma + y Firma - ,  eso es justo es lo que deseo realizar con MAGIX Web Designer 10 Premium que salga el texto y baje todo el contenido de la pagina  y luego darle a Firma -  que lo esconda, si puede ser mil gracias.

   

Comentarios

Carlos escrito el 30.12.AM a las 08:09 horas

Hola, no entiendo bien lo que quieres hacer, ¿lo que buscas es un menú desplegable?

Atrea escrito el 30.12.PM a las 15:05 horas

Hola encontré este código que poniéndolo en el Page background hace que el resto de la pagina no se monte el texto si no que la hace mas larga la pagina.

importar una imagen cualquiera a la pagina y luego en el código HTML body pongo esto.

<div class="divspoiler">
 <img src="http://cdn.adnxs.com/p/aa/c5/5a/33/aac55a33c876b4c57969d698fb924199.jpg" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
 </div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
 </div></div>

pero solo puedo poner uno en Page background si pongo mas ya no funciona como quiero.  

Carlos escrito el 31.12.AM a las 08:42 horas

Gracias por el código, pero parece que no funciona lo de ponerlo en el  Page background

aquí un ejemplo en la capa mouse off funcionando

http://picomartillo.magix.net/public/gorras/index.htm

y en Page background no funciona

http://picomartillo.magix.net/public/acordeon/index.htm

a ver si puedes poner un enlace funcionando gracias y

un saludo

 

Atrea escrito el 31.12.AM a las 10:43 horas

Hola Carlos al código si le quitas esto </div></div> del final después de "Aquí el contenido que queremos ocultar"  ya se mueve las fotos o texto y se extiende la página.

esta es una captura de donde pongo el código, lo hice con la línea seleccionada, propiedades web, marcador de lugar, código HTML (body) y lo puse hay, para que el texto salga mas a lo ancho hacer la línea mas larga. sí las fotos se mueven al final prueba haber.

 

Carlos escrito el 02.01.AM a las 09:30 horas

Gracias por el cógigo, el contenido si crece pero el Page background no, haría que poner el fondo del mismo color y luego la posición de los objetos no van bien al modificar el background, yo de momento no lo veo, eso es una petición pendiente para futuras versiones, gracias y un saludo.

Caimacan escrito el 02.01.AM a las 10:58 horas

Hola Carlos y Atrea:

Este asunto del Page background a simple vista lo veo complicado. ¿Por qué? estamos incorporando un código concreto para que aparezca un spoiler desplegable, ese código afecta solamente a ese espacio, cuando se despliega el spoiler, el final de página no aumenta y no lo hace porque habría que asignar algo más de CSS a la página en su conjunto.

Cuando estamos construyendo una web, le hemos asignado un tamaño de alto y de ancho, un código simple como ese spoiler no puede aumentar el tamaño de la página por sí solo, para que todos lo entendamos de una forma rápida, a ese CSS hay que decirle que cuando el spoiler se activa debe aumentar el final de página tanto como marque ese spoiler. Por tanto, si no hay parámetros de largura una vez activado el spoiler es imposible que nuestra página lo interprete. Por eso se monta y no hace ese efecto de acordeón deseado al largo total de la página.

Así lo entiendo yo. En cualquier caso, para este tipo de cosas y como bien has comentado Carlos en mi balance anual, son cosas necesarias a incorporar en nuevas versiones del programa.

Un saludo.

Toño.

 

Atrea escrito el 02.01.PM a las 13:09 horas

Hola, Toño y Calos. Gracias por considerar estas opciones  para futuras actualizaciones o versiones del programa que nos vendrán muy bien para futuras paginas web. lo del acordeón desplegable en vertical con la misma idea anterior que se pueda modificar el ancho y se desplace la página y Page background en la cual se pueda meter texto imágenes videos y demás, como este código.

 

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Accordion - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>

  $( function() {

    $( "#accordion" ).accordion();

  } );

  </script>

</head>

<body>

 

<div id="accordion">

  <h3>Section 1</h3>

  <div>

    <p>

    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer

    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit

    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut

    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

    </p>

  </div>

  <h3>Section 2</h3>

  <div>

    <p>

    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet

    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor

    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In

    suscipit faucibus urna.

    </p>

  </div>

  <h3>Section 3</h3>

  <div>

    <p>

    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.

    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero

    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis

    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

    </p>

    <ul>

      <li>List item one</li>

      <li>List item two</li>

      <li>List item three</li>

    </ul>

  </div>

  <h3>Section 4</h3>

  <div>

    <p>

    Cras dictum. Pellentesque habitant morbi tristique senectus et netus

    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in

    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

    mauris vel est.

    </p>

    <p>

    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.

    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

    inceptos himenaeos.

    </p>

  </div>

</div>

 

 

</body>

</html>

 

 

Caimacan escrito el 03.01.AM a las 09:53 horas

Hola Atrea:

Si te fijas en el código que nos muestras, existen 2 llamadas a un CSS y otras 2 a archivos JavaScript, concretamente estas:

Es lo que comentaba, en esos archivos está la clave para que se alargue la página cuando desplegamos el Spoiler. En cualquier caso, ya que hablas de texto, fotos y videos, quizás pueda servirte una caja de texto deslizante. Fíjate en este tutorial que hice:

https://www.magix.info/es/tutoriales/caja-de-texto-deslizante--1171444/

Un saludo Atrea,

Toño.

Atrea escrito el 03.01.PM a las 12:32 horas

Esta genial el poder tener códigos así, todo esto si lo llevase ya Magix web designer premiun seria fenomenal y asi no tener que acudir a códigos fuera de Magix. este es otro de pestañas en caja le añado el style que cambiando el width regulamos el ancho. este seria genial que lo tuviese Magix designer en la galería. como el de la caja deslizante que nos has enseñado, Gracias 

Buscare mas para que haber si Magix puede desarrollarlos para tener en la galería de diseños.

Saludos. 

 

<!doctype html>

<div style="background : #FFFFFF;
            color : #000000;
            padding : 0px;
            width : 420px;
            height : 0px;

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Tabs - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>

  $( function() {

    $( "#tabs" ).tabs();

  } );

  </script>

</head>

<body>

 

<div id="tabs">

  <ul>

    <li><a href="#tabs-1">Nunc tincidunt</a></li>

    <li><a href="#tabs-2">Proin dolor</a></li>

    <li><a href="#tabs-3">Aenean lacinia</a></li>

  </ul>

  <div id="tabs-1">

    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

  </div>

  <div id="tabs-2">

    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>

  </div>

  <div id="tabs-3">

    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>

    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>

  </div>

</div>

 

 

</body>

</html>

 

 

Atrea escrito el 04.01.AM a las 00:57 horas

Hola Toño encontré un efecto que para los días de navidad vendría genial o para marcar las estaciones otoño invierno etc. sale por toda la pagina según le marques el width de tamaño y si las imágenes son de calidad mejor este es del otoño y tiene hojas en el invierno nieve, en la primavera flores etc. este efecto merece la pena creo yo para que los tenga Magix en su galería creo que opinaras igual. dejo código para probar, feliz año.

Saludos

 

<div style="border : solid 2px #FFFFFF;
            background : #FFFFFF;
            color : #000000;
            padding : 4px;
            width : 800px;
            height : 700px;
            overflow : auto; ">
<script>
 //<![CDATA[
 // Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
 var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=15, waft=100, fallSpeed=5, wind=-1;

 newObject("http://lh5.googleusercontent.com/--jcOdbfXsBs/UGS2U_spSLI/AAAAAAAADCU/G-4XZ0mSEHg/s100/hoja1.png",29,15);
 newObject("http://lh5.googleusercontent.com/-aE24R5QmbE4/UGS2U_hZj0I/AAAAAAAADCM/7Hb18sy3qfo/s100/hoja2.png",27,23);
 newObject("http://lh6.googleusercontent.com/-9H8JyoZ6j3g/UGS2U2aOamI/AAAAAAAADCQ/6zY7uKgyV2A/s100/hoja3.png",46,15);
 newObject("https://lh3.googleusercontent.com/-OhuXMSqpELQ/UGS2Vq8Qf0I/AAAAAAAADCg/UTCK1YQUZqA/s100/hoja4.png",36,33);
 function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
 function fallObject(num,vari,nu){
 objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
 if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:9;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
 }
 function fall(){
 for(i=0;i<numObjs;i++){
 var fallingObject=document.getElementById('fO'+i);
 if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
 objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
 with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
 }
 setTimeout("fall()",31);
 }
 var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
 for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
 window.onresize=winSize;fall();
 //]]>
 </script>

 

Por cierto que no se me olvide el calendario que aunque marca el día en el que estamos, estaría genial que se pudiera meter texto en los días que quieras y así cuando llegue el día salga en automático un panel de texto que puedas poner texto fotos etc. para este tipo de eventos: Hoy estas de suerte MAGIX en el día de hoy tiene una oferta especial y solo por hoy MAGIX Digital DJ 2017 por tan solo 16€. Oferta valida para el 4 enero 2017.

 CODIGO

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>datepicker demo</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.12.4.js"></script>

  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

 

<div id="datepicker"></div>

 

<script>

$( "#datepicker" ).datepicker();

</script>

 

</body>

</HTML>

 

Saludos y que tengáis un buen día 4 enero 2017 

Carlos escrito el 04.01.AM a las 10:10 horas

Gracias por los códigos, seguro que a más de uno le es útil. Un saludo.

Caimacan escrito el 04.01.PM a las 14:03 horas

Hola Atrea:

Sí, ese tipo de efecto ya lo había utilizado en alguna de mis webs, aunque utilicé el efecto nieve ya que estábamos en plena navidad en aquella época. Hace años era muy normal ver esos efectos, hace poco entré una web que lo tenía, aunque debo decir que cada vez se ve menos.

En cualquier caso, son recursos que seguro le vendrá bien a alguno.

Un saludo Atrea,

Toño

Atrea escrito el 05.01.PM a las 13:48 horas

Hola Carlos y Toño si es verdad no se utiliza mucho pues seria dos o tres días cada varios meses, como bien dices son recursos y cuantos mas mejor aunque luego no los utilices nada mas que en algunas web, otro tema seria los Slideshow que Magix tuviera una herramienta para crearlos un ejemplo seria el amazingslider. Dejo los datos de la dirección web para que lo probéis y haber si funcionaria en Web Designer y si saben como poner los archivos resultantes para integrarlo.

Amazing Slider Version 6.2
Copyright 2016 Magic Hills Pty Ltd
http://amazingslider.com/

También dejo algún código mas: Música para web en automático y sin que pueda controlar el usuario de la web.
 

<BGSOUND SRC="C:\Users\..........\Vivaldi.mp3  ó  https://www......... etc. "LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true" VOLUME="15">

para probar con la dirección de C:\........

 Este otro para abrir otra ventana en automático es muy útil pues cuando buscan los usuarios en internet y sale una página que no es la principal y pinchan abre la seleccionada en google etc... y la secundaria que puedes poner la principal o index.

<script language='JavaScript'>window.open('http://www.index a', 'geoflotante', '');</script>
 

Saludos

 

Carlos escrito el 06.01.AM a las 07:38 horas

Hola, si quieres puedes hacer algún tutorial con ejemplos de los códigos en la variante normal y en la móvil esta es importante ya que ahora se navega mucho con dispositivos móviles. Los tutoriales puedes compartirlos con toda la comunidad Magix, gracias y un saludo.

https://www.magix.info/es/tutoriales/publicar-tutorial/

 

Atrea escrito el 06.01.AM a las 11:27 horas

Hola Carlos apenas tengo tiempo esto es una excepción pero si tu puedes o alguien de magix tiene tiempo de repasar los códigos y mejorarlos bienvenido sea, para luego compartirlos con toda la comunidad Magix. Aunque lo interesante seria que magix tuviese un sitio para clientes en su web con una gran diversidad de códigos claro mejores que estos que se pueda cambiar de color, tamaño, forma etc...

este es para ver los documentos que tengas almacenados en OneDrive o Dropbox. te lo abre en el navegador con el 365 online y hasta puedes editarlo etc.. pruébalo y me dices.

<p></p>

<a href="Ej: https://onedrive.live.com\...direccion del documento word excel etc. que almacena en OneDrive o Dropbox. lo abre con el 365 Online " target='_blank' title="Click here to open a Word document">Click here to open a Word document</a>


Saludos

Carlos escrito el 09.01.PM a las 15:02 horas

Gracias por el código, Funciona bien.

Atrea escrito el 25.01.AM a las 02:35 horas

Hola Carlos y Toño, encontré un código que cambiando algunas cosas pude conseguir que funcione en vertical , en horizontal también seria necesario para las web modernas, este seria otra opción para texto que no puede faltar en magix, no extiende la pagina como es normal pues como dice Toño hay que darle las ordenes para que lo haga, a por cierto me compre el nuevo designer versión 12 ya trae lo de crear slideshow widget ya era hora, que alegría hay que seguir en esa línea pero que sea mas rápido que no tengamos que esperar dos años a que magix designer web avance en novedades que otros llevan utilizado varios años atrás. lo de las ilustraciones en stock era necesario pues para crear web de calidad hacen falta fotos de calidad un bien por magix y sus trabajadores. en fin haber este trimestre que actualizaciones nos pone magix en el catálogo de contenidos online. sin mas os dejo el código le puse colores letras imágenes probarlo haber si os gusta para incorporar en el cátalogo...

Código:  Para poner en el BODY de un rectángulo, imagen...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

</head>

<BODY><DIV id=outer-wrapper>
<DIV id=wrap2>
<DIV id=content-wrapper>
<DIV id=content-wrapper-inner>
<DIV id=main-wrapper>
<DIV class="main section" id=main>
<DIV class="widget Blog" id=Blog1 data-version="1">
<DIV class="blog-posts hfeed">
<DIV class="post hentry" id=post-1162481369402031097 itemtype="http://schema.org/BlogPosting" itemscope="itemscope">
<DIV class="post-body entry-content" id=post-1162481369402031097 itemprop="articleBody">
<DIV class=verticalaccordion>
<UL>
<LI>
<H3>TRIATLÓN RUNNER en función de la experiencia, grado de preparación y nivel competitivo</H3>
<DIV>
<P style="TEXT-ALIGN: center"> <img src="http://www.magix-online.com/themes/MAGIX_ONLINE/images/locale/es/footer_mowlogo.png"
</P>
<P style="TEXT-ALIGN: justify">  Hace tanto tiempo que ya nadie se acuerda de que hubo una época en la que cada niño vivía con un duendecillo de la felicidad que lo acompañaba desde el día de su nacimiento. Los duendecillos se alimentaban de la alegría de los niños, y por eso eran expertos inventores de juguetes y magníficos artistas capaces de provocar las mejores sonrisas.

 Con el paso de los años, los duendes mejoraron sus inventos y espectáculos, pero la alegría que conseguían era cada vez más breve. Por más que hicieran, los niños se volvían gruñones y exigentes cada vez más temprano. Todo les parecía poco y siempre querían más. Y ante la escasez de felicidad, los duendes comenzaron a pasar hambre.

Pero cuando pensaban que todo estaba perdido, apareció la pequeña Elsa. Elsa había sido una niña muy triste, pero de pronto se convirtió en las más poderosa fuente de alegría. Ella sola bastaba para alimentar cientos de duendes. Pero cuando quisieron felicitar a su duende, el pequeño Flop, no lo encontraron por ningún sitio. Por más que buscaron no hubo suerte, y cuando lo dieron por muerto, decidieron sustituirlo por Pin, el mejor duende de todos.

Pin descubrió enseguida que Elsa era diferente. Ella no disfrutaba mucho con los regalos y maravillas de su duende. Regalaba a otros niños la mayoría de juguetes que recibía de Pin, y nunca dejaba que su duende actuase solo para ella. Vamos, que parecía que su propia alegría le importaba mucho menos que la de los demás niños y a Pin le preocupaba que con esa actitud se pudiera ir gastando toda su energía.

Una noche, mientras Pin descansaba en su cama de duende, sintió algo extraño bajo el colchón, y al levantarlo descubrió la ropa de Flop, cubierta de chocolate dorado. Como todos los duendes, Pin conocía las leyendas sobre el chocolate dorado, pero pensaba que eran mentira. Ahora, viendo que podían ser ciertas, Pin corrió hacia la cama en que dormía Elsa y miró a través de sus ojos. ¡Allí estaba Flop, regordete de tanta felicidad! Pin sabía que desde dentro Flop no podía verle, pero volvió a su cama feliz por haber encontrado a su amigo, y por haber descubierto el secreto de la felicidad de Elsa: Flop la había convertido desde dentro en un duendecillo de la felicidad, y ahora que estaba tan ocupada haciendo felices a otros se había convertido en una niña verdaderamente feliz.

 Los días siguientes Pin investigó cuanto pudo sobre el chocolate dorado para enseñar a los demás duendes cómo hacer el mismo viaje. Bastaba con elegir un niño triste, posarse en su mano mientras dormía, darle un fuerte abrazo, y desear ayudarlo con todas sus fuerzas.
 Así fue como Pin se convirtió en un bombón dorado. Y a la mañana siguiente aquel niño triste se lo comió. Aunque sabía que no le dolería, pasó muchísimo miedo, al menos hasta que le tocó la lengua, porque a partir de ese momento sintió las cosquillas más salvajes y rió y rió y rió… hasta que estalló de risa. Y entonces apareció en el alma de aquel niño triste, dispuesto a convertirlo en un auténtico duendecillo de la felicidad ayudando a otros a ser más felices
</P></DIV></LI>
<LI>
<H3>RUNNER / TRAIL en función de la experiencia, grado de preparación y nivel competitivo</H3>
<DIV>
<P style="TEXT-ALIGN: center"> <img src="http://www.magix-online.com/themes/MAGIX_ONLINE/images/locale/es/footer_mowlogo.png"
</P>
<P style="TEXT-ALIGN: Justify">  Hace tanto tiempo que ya nadie se acuerda de que hubo una época en la que cada niño vivía con un duendecillo de la felicidad que lo acompañaba desde el día de su nacimiento. Los duendecillos se alimentaban de la alegría de los niños, y por eso eran expertos inventores de juguetes y magníficos artistas capaces de provocar las mejores sonrisas.

 Con el paso de los años, los duendes mejoraron sus inventos y espectáculos, pero la alegría que conseguían era cada vez más breve. Por más que hicieran, los niños se volvían gruñones y exigentes cada vez más temprano. Todo les parecía poco y siempre querían más. Y ante la escasez de felicidad, los duendes comenzaron a pasar hambre.

Pero cuando pensaban que todo estaba perdido, apareció la pequeña Elsa. Elsa había sido una niña muy triste, pero de pronto se convirtió en las más poderosa fuente de alegría. Ella sola bastaba para alimentar cientos de duendes. Pero cuando quisieron felicitar a su duende, el pequeño Flop, no lo encontraron por ningún sitio. Por más que buscaron no hubo suerte, y cuando lo dieron por muerto, decidieron sustituirlo por Pin, el mejor duende de todos.

Pin descubrió enseguida que Elsa era diferente. Ella no disfrutaba mucho con los regalos y maravillas de su duende. Regalaba a otros niños la mayoría de juguetes que recibía de Pin, y nunca dejaba que su duende actuase solo para ella. Vamos, que parecía que su propia alegría le importaba mucho menos que la de los demás niños y a Pin le preocupaba que con esa actitud se pudiera ir gastando toda su energía.

Una noche, mientras Pin descansaba en su cama de duende, sintió algo extraño bajo el colchón, y al levantarlo descubrió la ropa de Flop, cubierta de chocolate dorado. Como todos los duendes, Pin conocía las leyendas sobre el chocolate dorado, pero pensaba que eran mentira. Ahora, viendo que podían ser ciertas, Pin corrió hacia la cama en que dormía Elsa y miró a través de sus ojos. ¡Allí estaba Flop, regordete de tanta felicidad! Pin sabía que desde dentro Flop no podía verle, pero volvió a su cama feliz por haber encontrado a su amigo, y por haber descubierto el secreto de la felicidad de Elsa: Flop la había convertido desde dentro en un duendecillo de la felicidad, y ahora que estaba tan ocupada haciendo felices a otros se había convertido en una niña verdaderamente feliz.

 Los días siguientes Pin investigó cuanto pudo sobre el chocolate dorado para enseñar a los demás duendes cómo hacer el mismo viaje. Bastaba con elegir un niño triste, posarse en su mano mientras dormía, darle un fuerte abrazo, y desear ayudarlo con todas sus fuerzas.
 Así fue como Pin se convirtió en un bombón dorado. Y a la mañana siguiente aquel niño triste se lo comió. Aunque sabía que no le dolería, pasó muchísimo miedo, al menos hasta que le tocó la lengua, porque a partir de ese momento sintió las cosquillas más salvajes y rió y rió y rió… hasta que estalló de risa. Y entonces apareció en el alma de aquel niño triste, dispuesto a convertirlo en un auténtico duendecillo de la felicidad ayudando a otros a ser más felices
</P></DIV></LI>
<LI>
<H3>Programas de entrenamiento HEALTH “más información en no solo Triatlón”</H3>
<DIV>
<P style="TEXT-ALIGN: center"> <img src="http://www.magix-online.com/themes/MAGIX_ONLINE/images/locale/es/footer_mowlogo.png"
</P>
<P style="TEXT-ALIGN: Justify">  Hace tanto tiempo que ya nadie se acuerda de que hubo una época en la que cada niño vivía con un duendecillo de la felicidad que lo acompañaba desde el día de su nacimiento. Los duendecillos se alimentaban de la alegría de los niños, y por eso eran expertos inventores de juguetes y magníficos artistas capaces de provocar las mejores sonrisas.

 Con el paso de los años, los duendes mejoraron sus inventos y espectáculos, pero la alegría que conseguían era cada vez más breve. Por más que hicieran, los niños se volvían gruñones y exigentes cada vez más temprano. Todo les parecía poco y siempre querían más. Y ante la escasez de felicidad, los duendes comenzaron a pasar hambre.

Pero cuando pensaban que todo estaba perdido, apareció la pequeña Elsa. Elsa había sido una niña muy triste, pero de pronto se convirtió en las más poderosa fuente de alegría. Ella sola bastaba para alimentar cientos de duendes. Pero cuando quisieron felicitar a su duende, el pequeño Flop, no lo encontraron por ningún sitio. Por más que buscaron no hubo suerte, y cuando lo dieron por muerto, decidieron sustituirlo por Pin, el mejor duende de todos.

Pin descubrió enseguida que Elsa era diferente. Ella no disfrutaba mucho con los regalos y maravillas de su duende. Regalaba a otros niños la mayoría de juguetes que recibía de Pin, y nunca dejaba que su duende actuase solo para ella. Vamos, que parecía que su propia alegría le importaba mucho menos que la de los demás niños y a Pin le preocupaba que con esa actitud se pudiera ir gastando toda su energía.

Una noche, mientras Pin descansaba en su cama de duende, sintió algo extraño bajo el colchón, y al levantarlo descubrió la ropa de Flop, cubierta de chocolate dorado. Como todos los duendes, Pin conocía las leyendas sobre el chocolate dorado, pero pensaba que eran mentira. Ahora, viendo que podían ser ciertas, Pin corrió hacia la cama en que dormía Elsa y miró a través de sus ojos. ¡Allí estaba Flop, regordete de tanta felicidad! Pin sabía que desde dentro Flop no podía verle, pero volvió a su cama feliz por haber encontrado a su amigo, y por haber descubierto el secreto de la felicidad de Elsa: Flop la había convertido desde dentro en un duendecillo de la felicidad, y ahora que estaba tan ocupada haciendo felices a otros se había convertido en una niña verdaderamente feliz.

 Los días siguientes Pin investigó cuanto pudo sobre el chocolate dorado para enseñar a los demás duendes cómo hacer el mismo viaje. Bastaba con elegir un niño triste, posarse en su mano mientras dormía, darle un fuerte abrazo, y desear ayudarlo con todas sus fuerzas.
 Así fue como Pin se convirtió en un bombón dorado. Y a la mañana siguiente aquel niño triste se lo comió. Aunque sabía que no le dolería, pasó muchísimo miedo, al menos hasta que le tocó la lengua, porque a partir de ese momento sintió las cosquillas más salvajes y rió y rió y rió… hasta que estalló de risa. Y entonces apareció en el alma de aquel niño triste, dispuesto a convertirlo en un auténtico duendecillo de la felicidad ayudando a otros a ser más felices
</P></DIV></LI>
<li>
<DIV>
<DIV style="TEXT-ALIGN: center">
<FORM style="WIDTH: 400px; MARGIN: 0px auto" action=">AFFAFFARSRSRSRR<BR>
<TABLE width="60%" style="PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; MARGIN: 7px auto 0pt; PADDING-RIGHT: 10px; BACKGROUND-COLOR: rgb(0,0,0)" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>

</html>
<style>.verticalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */  margin: 0 auto;  padding: 0;  list-style: none;  width: 500px;}.verticalaccordion>ul>li { /* definimos cada item de la lista  */  display: block;  height:40px; /* la altura de las pestañas */  list-style: none;  margin: 0;  overflow: hidden;  padding: 0;  text-align:center;  width: 1235px;  /* la parte personalizable */  background-color:#fff;  transition: height 4s ease-in-out;  -moz-transition: height 4s ease-in-out;  -webkit-transition: height 4s ease-in-out;  -o-transition: height 4s ease-in-out;}.verticalaccordion>ul>li>h3 { /* el titulo de cada pestaña   */  display: block;  margin: 0;  padding: 10px;  height: 19px;  /* la parte personalizable */  color: #fff;  border-top:1px solid #fff;  font-family: Lucida Grande;  font-size:20px;  text-decoration:none;  text-transform:uppercase;  background: #5f005e;  background: -moz-linear-gradient( top, #999999, #cccccc);  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";}.verticalaccordion>ul>li>div { /* el contenido oculto */  margin: 0;  overflow: auto;  padding: 10px;}.verticalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */height: 100%;}.verticalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */  color: #fff;  background: #770076;  background: -moz-linear-gradient( top, #454545, #000000);  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";}.verticalaccordion>ul>li>h3:hover {  cursor:pointer;}

<body>
</body>
</html>

<body>
</body>
</html>

 

   

Caimacan escrito el 25.01.PM a las 12:44 horas

Hola Atrea:

El código que muestras funciona perfectamente. Tal vez te pueda interesar un tipo de acordeón que ya existe en la versión WD12, en ella tenemos 3 tipos de acordeón para un texto no demasiado extenso, tal vez te sirva. Son Widgets que están en la galería "recursos de imagen", son estos:

Respecto a lo que comentaste el otro día sobre este slider http://amazingslider.com/, lo he utilizado alguna vez pero yo prefiero los que tiene el programa Wowslider http://wowslider.com/es/, son muy buenos, también los he utilizado en algunas ocasiones.

Un saludo,

Toño.