Como lograr el efecto "Seguir Leyendo" de una descripción- php
Tengo una duda con respecto a php: resulta que quiero mostrar datos de una BD donde tengo una tabla productos: y dentro de ella la DESCRIPCIÓN del mismo. Pero al mostrar solo quiero que se vea una parte de la descripción, y que luego aparezca un enlace que diga "seguir leyendo" y que se cargue el texto faltante en la misma página, que no se vaya a otra..
Bueno lo que hice fue algo así: no se si esta bien, la otra cuestión es que cuando presiono "Seguir leyendo" el texto aparece debajo y me gustaría que apareciera al lado, como una continuación porque si el texto se cortara en media palabra la otra mitad estaría en el renglón de abajo :(
<! DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<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 src="js/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function(){
$('#alternar-respuesta-ej1').on('click',function(){
$('#respuesta-ej1').toggle('slow');
$('#alternar-respuesta-ej1').hide();
});});
</script>
</head>
<body>
<?php $descrip ="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet magna. Nunc elit felis, semper quis, tincidunt eu, commodo vitae, elit. Duis eu purus non urna consectetur semper. Integer posuere volutpat dolor. Nunc molestie, sem vitae consequat convallis, lectus est bibendum purus, a pellentesque risus mauris sit amet dolor. Morbi ultricies. Morbi elit massa, varius ut, dignissim ac, porttitor sed, nulla. Duis mattis erat id mauris. Vivamus iaculis, pede quis dapibus interdum, pede libero sodales urna, eu eleifend neque lorem ut odio. Quisque vulputate ultricies ligula. Morbi non nisi et urna scelerisque pretium. Nunc dictum lacus quis nunc.";
$cortar1 = substr($descrip, 56);
//$resultado = substr($descrip, 50);
if ((strlen($descrip))> 10) {
$descrip=substr($descrip, 0, 56)."<a style=color:#000 href='#' id='alternar-respuesta-ej1'>..Sequir leyendo...</a>";
}
echo $descrip."<div id='respuesta-ej1' style='display:none'>".$cortar1." </div>"; ?>
</body>
</html>Aclaración: utilice en la variable $descrip un texto cualquiera, porque si me sale quiero que tenga el valor obtenido de la tabla productos
1 respuesta
Hola mina aino,
Se pone en la fila de abajo ya que el componente <div>, que es el que incluye el texto oculto, es de tipo "bloque" y ocupa toda la línea.
Cámbialo por un <span>, que es de tipo "inline", y te debería mostrar el texto a continuación.
¡Gracias!
gracias por contestar!! voy a cambiarlo :))
Perfecto,
Recuerda valorar la respuesta si te ha sido útil :)
