Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Mostrar ocultar con SlideToggle una div en un bucle

Buenas,
Tengo una pagina de peliculas a la que quiero ponerle un SlideToggle a cada pelicula para que me salga una div con el titulo de la pelicula encima de la portada, el problema es que la portada la tengo en un bucle do while para que me la repita y me saque de la base de datos todas las portadas de las peliculas que tengo.

El problema es que cuando ponga el raton encima de la primera portada me sale el titulo en todas las portadas no solo me hace la funcion en esa misma. Y cuando pongo el raton encima de la segunda no me interpreta el codigo..
Aqui le dejo el codigo que uso.
<?php require_once('Connections/conexion.php'); ?>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
    $("#contenido_post").hover(function(){
    	$(".info").slideToggle('slow');
    });
});
</script>
<?php

//Consulta de la BD
mysql_select_db($database_conexion, $conexion);
$query_ListadoCartelera = "SELECT * FROM posts WHERE posts.cartelera = 1 ORDER BY posts.id DESC LIMIT 20";
$ListadoCartelera = mysql_query($query_ListadoCartelera, $conexion) or die(mysql_error());
$row_ListadoCartelera = mysql_fetch_assoc($ListadoCartelera);
$totalRows_ListadoCartelera = mysql_num_rows($ListadoCartelera);

?>
<?php if ($row_ListadoCartelera == "") {
	echo "No hay ninguna pelicula en cartelera";
} else { ?>
<?php do { ?>
  <div id="post_global">
    <div id="contenido_post"><a href="<?php echo $row_ListadoCartelera['seo']; ?>.html">
    <img src="inc/portadas/<?php echo $row_ListadoCartelera['portada']; ?>" width="157" height="250" /></a>
    <div class="info">
    	<?php $cortartittle = $row_ListadoCartelera['titulo']; 
	if ((strlen($cortartittle)) > 19) { $cortartittle=substr($cortartittle, 0, 29).".."; }
	echo $cortartittle; ?>
    </div>
    </div>
    </div>
  <?php } while ($row_ListadoCartelera = mysql_fetch_assoc($ListadoCartelera)); ?>

<?php }?>
<?php
mysql_free_result($ListadoCartelera);
?>

Editado
0
Puntos
5
Resp
618
Visitas
Por valentinchiflu hace 28 meses
Principiante offline Sitio web

Respuesta #1

Hola tendrías que agregar una clase a tu div con id contenido_posts para poder jugar con el elemento donde haces clic utilizando this...

Te pongo un ejemplo hecho con el evento clic de jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
    $(".veritem").click(function(){
    	$(this).slideToggle('slow');
    });
});
</script>
<style>
	#contenido {
		padding: 4px;
		margin: 4px;
		border: 1px solid #ddd;
		cursor: pointer;
		max-width: 200px;
	}
</style>
<div id="contenido" class="veritem">Item 1</div>
<div id="contenido" class="veritem">Item 2</div>
<div id="contenido" class="veritem">Item 3</div>
<div id="contenido" class="veritem">Item 4</div>
en tu caso tienes que usar el evento hover:
<script type="text/javascript">
	$(document).ready(function(){
    $(".veritem").hover(function(){
    	$(this).slideToggle('slow');
    });
});
</script>
Demo
0
Puntos
Por alber hace 28 meses
Administrador offline

Respuesta #2

Veamos, aver si lo he entendido bien, tendria que ponerle una clase aparte de la id que tiene el contenido_post y esa clase ponerla en:
<script type="text/javascript">
      $(document).ready(function(){
$(".aqui va la clase que le pongo nueva").hover(function(){
     $(this).slideToggle('slow');
   });
});

¿¿Sería algo así??
Salu2
1
Puntos
Por valentinchiflu hace 28 meses
Principiante offline Sitio web

Respuesta #3

si pero si lo que quieres es abrir un elemento hijo es decir que al hacer clic en cada película se abra se abra una div donde tienes la descripción (por ejemplo) podrías usar children para abrir o cerrar la descripción justo de esa película, te dejo otro ejemplo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
    $(".veritem").click(function(){
    	$(this).children('.content').slideToggle('slow');
    });
});
</script>
<style>
	#contenido {
		padding: 4px;
		margin: 4px;
		border: 1px solid #ddd;
		cursor: pointer;
		max-width: 200px;
	}
	.content {
		display: none;
	}
</style>
<div id="contenido" class="veritem">
<div class="header">Item1</div>
<div class="content">
	Lorem ipsum dolor.
</div>
</div>

<div id="contenido" class="veritem">
<div class="header">Item2</div>
<div class="content">
	Lorem ipsum dolor 2.
</div>
</div>
con esto ya lo tienes solo tienes que adaptarlo a tu proyecto, muy sencillo...

Demo
1
Puntos
Por alber hace 28 meses
Administrador offline

Respuesta #4

Muchas gracias!! Cuando tenga un poco de tiempo lo probare y te comento, esa opción de children supongo que se puede usar tambien con hover en vez de click.

Salu2
0
Puntos
Por valentinchiflu hace 28 meses
Principiante offline Sitio web

Respuesta #5

Funciono a la perfección, mil gracias !!!
0
Puntos
Por valentinchiflu hace 28 meses
Principiante offline Sitio web

Relaccionados

Para comentar Inicia sesión o Registrate