div jquery

[Alberto_Mad]

Hola
tengo una pequeña duda y la verdad es que no se como resolverla

Estoy intentando hacer un efecto con Jquery el cual muestre una capa cuando pulse sobre un enlace y que la oculte cuando pulse sobre otro.
El código que tengo es el siguiente:

Código Javascript:

<script src="jquery-1.5.min.js" type="text/javascript"></script>    
<script> 
$(document).ready(function(){
    $("#ocultar").click(function(event){
      event.preventDefault();
      $("#capaefectos").hide("slow");
    });
 
    $("#mostrar").click(function(event){
      event.preventDefault();
      $("#capaefectos").show(3000);
    });
});
</script>
 

Código con Jquery y el código que me muestra la capa con sus respectivos enlaces es:

Código PHP:

<?php       
 
   while($row = mysql_fetch_array($result)) { 
       print("<p>");
        print(   $row['TituloNoticia']);
           print("<a href='#' id='mostrar'>ver Titulo Notica</a>         
        </p>
        <div id='capaefectos' style='background-color: #cc7700; color:fff; padding:10px; display:none;'>");                       
        print(  $row['DescripcionNoticia']);         
        print(" <br>        
            <br>        
            <a href='#' id='ocultar'>Ocultar la capa</a>
    </div>");   } 
   mysql_free_result($result); 
   mysql_close($link); 
?>
 

Esto lo estoy usando para mostrar una serie de noticias que tengo en una db, pero la cosa es que me va bien para una sola noticia, pero cuando tengo más de una, solo muestra la capa para la primera noticia y no para el resto, ya que el div es único. La cosa es que no se como hacer para que muestre las noticias que dispongo en la db, con sus respectivos títulos y descripcion y que haga el efecto de mostrar y ocultar la capa.

Muchas gracias por su ayuda

[caricatos]

Tema movido desde AJAX

[enrique4480]

si pones el id o el class afecta a cada uno de ellos, pon:

Código Javascript:

$(this).next().show("slow"); //afecta solo en el elemento que ocurrio el evento.
 

siempre que sea el siguiente elemento que quieras mostrar, si quieres otro next admite selectores. en la documentacion de jquery encontraras mas detalles.

un ID es unico, no tiene que repetirse.

[Alberto_Mad]

Muchas gracias por contestar me has sido de mucha ayuda.

Pero ahora tengo un pequeño problema porque la cosa me va muy bien cuando quiero mostrar, pero no me funciona cuando quiero ocultar la capa.

Lo que he puesto es lo siguiente:

Código Javascript:

$(this).next().hide("slow");
 

Con este código no oculta la capa, sabrías como hacerlo??

Muchas gracias

[enrique4480]

en tu caso si no he mirado mal el codigo que pusiste en el primer post, para ocultar tienes que usar parent ya que es hijo del elemento que quieres ocultar. un ejemplo simple para que te situes:

<elemento1> // next = elemento2
<elemento2>
<elemento3> // prev = elemento2

<elemento1> // next = elemento2
<elemento2>
.<elemento3> // parent = elemento2


nota que he añadido un simple espacio en el ejemplo2 para hacer ver que elemento3 seria hijo de elemento2.

[Alberto_Mad]

ok, justo lo que necesitaba

Muchas gracias