hacer clik en el título, y se extiende el párrafo

Me gustaría saber cómo se hace lo siguiente:
Tengo los títulos de unos párrafos, que al hacer click en un título, aparece justo debajo todo el párrafo que le corresponde, y el resto de títulos que setaban debajo de este, se desplazan hasta el final del parrafo que acaba de aparecer. Y luego, al clickear en otro título, el párrafo que estaba extendido desaparece, y aparece el que le corresponde.
¿se entiende?
muchas gracias

Deberías crear una función con javascript para hacer eso, ahora no tengo mucho tiempo para ponerte un ejemplo, pero te puedo dar la idea.

Ten cuidado porque en ese ejemplo faltaría poner las etiquetas noscript con un link hacia la página secundaria para la gente que no tenga habilitado el javascript, para que puedan ver el contenido también.

Capt.Mahou te puede decir qué script se utiliza para hacer eso, yo es que no sé cuál es.

Dios, eso me encanta, seria un script de Ajax no?

Te dejo una página con ejemplos para descargar

http://dbajax.sourceforge.net/

Yo tb quiero descubrir como va, lo instaré en web, esta tremendo eso.

Breath escribió:

Que! Eso es javascript simplemente... nada de AJAX.

Yo te recomendaría usar JQuery o mootools, y de ahi usar sus efector predeterminados y usarlos en los parrafos.

Puedes hacerlo fácilmente con jQuery:
Haces una funcion que oculte todos los divs. Otra con un parametro de callback, que llamará la funcion anterior, y mostrará un div especifico. Los titulos serán <a>, que llamaran la segunda funcion y como parametro, el id del div a mostrar.....

Si no te queda muy claro, me avisas. En estos dias debería salir un tuto de jQuery en Clab, asi que te puedes basar en eso...

Saludos!

Usa jquery es fácil y es ligero. En la misma página hay un ejemplo de lo que puedes hacer, si prestas atención, hay un botón que dice run, y el código que hace la magia.
ejemplos de lo que puedes hacer.

Muchas gracias por vuestra ayuda. De todas formas, no controlo yo de estas cosas, y hasta ahora no habia oido hablar de jquery. ¿qué es?
Y estas cosas no se pueden hacer con css? Es que, aqui (en la pagina de tutoriales de jquery) me sale el codigo, pero no se qué hacer con él, donde meterlo. No quiero hacer un efecto muy complicado. A mi con saber hacer lo más sencillo me vale, por ahora. Como cuando clicas en show, y aparece el código, algo así.

ponte a leer la documentación de jquery

RattaMono escribió:

si me lo permiten decir creo que eso es mas que solo javascript, tambien se usa DOM o al menos yo usaria DOM

buzu escribió:

Y eso que tiene de asincrónico?

Ok ok, algo más fácil en vez de "aprende esto, usa esto y esto otro también". Lo que buscas es un efecto acordeón. Buscalo en la red, seguro encuentras lo que buscas. Ya existen muchos scripts asi.

NEO_JP escribió:

Que ven mis ojos!!! NEO_JP evitando promocionar jQuery!!
--
La verdad, objetivamente, es mas facil usar una librería JS, como jQuery. Te evitas muchso problemas, te ahorras codigo, y tienes mas efectos (y cosas mas interesantes que efectos)

RattaMono escribió:

Sin duda...

Me habéis animado con jQuery traidores... además mootools ha crecido en funcionalidades y me he vuelto a perder... y siendo de un italiano cualquiera se fia de la mafia

Gracias, pero vuestras discusiones no me interesan mucho. Gracias Neo, he encontrado más o menos lo que buscaba.

Araitz escribió:

ajjaja, ante nada: tú tranquila, si posteas con frecuencia en poco tiempo te darás cuenta de que la gente por aquí desvaría bastante, aunque normalmente ayudamos, o por lo menos se intenta...

Araitz escribió:

Te deberían interesar
De ellas puedes sacar muchas cosas que te servirán a futuro, o ahora mismo.

Hola otra vez!
encontré algo ke pensaba ke me servía, pero me he dado cuenta que no se ve en el explorer, aunque en firefox y netscape si.
Si alguien me puede ayudar...

aqui javascript:

Código :

<script type="text/JavaScript">
function mostrar_submenu(fila){
   status =document.getElementById(fila).style.display;
   if(status=='none'){
      document.getElementById(fila).style.display="block";
   }else{
   document.getElementById(fila).style.display="none";
   }
}
</script>

y aqui html

Código :

<div id="tituloMenuVertical">Programas de Apoyo </div>
    <ul class="menuVertical">

         <li><a href="javascript:mostrar_submenu('submenu_1');">otros espacios esc&eacute;nicos:</a>
    
     <ul style="display:none;" id="submenu_1">
          <li>redes:</li>
              <ul>
               <li>Red espa&ntilde;ola de Teatros Auditorios, Circuitos y Festivales de titularidad p&uacute;blica:<a href="http://www.redescena.net" target="_blank"> www.redescena.net </a></li>

               <li>Red Boga:<a href="http://www.netboga.net"target="_blank"> www.netboga.net</a> </li>
            </ul>
            
         <li>espacios en Navarra:</li>
                  <ul>
                     <li>Zizur:<a href="http://www.zizurmayor.es"  target="_blank"> www.zizurmayor.es</a></li>

                     <li>Ansoáin:<a href="http://www.ansoain.es"  target="_blank"> www.ansoain.es</a></li>
                     <li>No&aacute;in:</li>
                     <li>Burlada</li>
                     <li>Escuela Navarra de Teatro:<a href="http://www.laescueladeteatro.com" target="_blank"> www.laescueladeteatro.com</a><</li>

                     <li>Baluarte:<a href="http://www.baluarte.com" target="_blank"> www.baluarte.com</a></li>
                     <li>Gayarre:<a href="http://www.teatrogayarre.com"  target="_blank"> www.teatrogayarre.com</a><</li><br><br>
                  </ul>
                  
                  
         <li>espacios en el estado:</li>
                  <ul>

                     <li>Auditorio nacional de m&uacute;sica: <a href="http://www.auditorionacional.mcu.es"  target="_blank">www.auditorionacional.mcu.es</a></li>
                     <li>Euskalduna jauregia Bilbao:<a href="http://www.euskalduna.net" target="_blank"> www.euskalduna.net</a></li>
                     <li>Kursaal palacio de congresos:<a href="http://www.euskalduna.net" target="_blank"> www.kursaal.org</a></li>
                     <li><Tenerife:<a href="http://www.auditoriotenerife.com"  target="_blank"> www.auditoriotenerife.com</a></li>

                     <li>Auditorio Zaragoza:<a href="http://www.auditoriozaragoza.com"  target="_blank"> www.auditoriozaragoza.com</a></li>
                  </ul>
            
            </ul>
          
         <li><a href="javascript:mostrar_submenu('submenu_2');">compa&ntilde;&iacute;as, grupos y entidades art&iacute;sticas:</a>

    
           <ul style="display:none;" id="submenu_2">

                  <li>m&uacute;sica</li>
                  <li>teatro</span></li>
                  <li>danza</span></li>
                  <li>opera</span></li>
                  <li>artes pl&aacute;sticas</span></li>

                  <li>otros</li>
         </ul></li>
         
         
         <li><a href="javascript:mostrar_submenu('submenu_3');">empresas equipamiento t&eacute;cnico y esc&eacute;nico:</a>

    
           <ul style="display:none;" id="submenu_3">
                  
                  <li>strong-fresnel:<a href="http://www.fresnel.es"  target="_blank"> www.fresnel.es</a></li>

                     <li>alis:<a href="http://www.alis.es" target="_blank"> www.alis.es</a></li>
               </ul></li>
     </ul>
  </div>

Prueba poniendo un onclick="tu_funcion_javascript"

O usa jQuery

Ok, como joden.. ahi va un efecto rápido de acordeón entre listas con jQuery.

Código :

// on dom ready
$(document).ready(function(){
   // hide all p inside #nav > li
   $('#nav > li > p').hide();
   
   // Simple accordion effect                     
   $('#nav > li > a').click(function(){
      // hide all p inside #nav > li
      $('#nav > li > p').hide();
      // show the element next the link clicked
      $(this).next().show();
      // stop the link href
      return false;
   });
});

Código :

<ul id="nav">
   <li>
      <a href="#">Abc</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Def</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Ghi</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Jkl</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Mno</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Pqr</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Stu</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Wvx</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
   <li>
      <a href="#">Yz</a>
      <p>Lorem ipsum dolor sit amet</p>
   </li>
</ul>

RattaMono escribió:

que tal rattamono, si lees bien yo en ningun momento dige que fuera asincrono...estoy de acuerdo en que eso para nada es ajax, pero no estoy de acuerdo en que sea puro javascript.