Desplegable leer mas en JQuery

El objetivo es tener un texto con un “leer mas” que al clicar, este se desplegué y aparezca un texto oculto.
En nuestro PHP tendremos que cargar el jquery y hacer uso del ID mostrar para el leer mas y oculto para el texto oculto como veremos a continuación.
nota: este texto estaba en el campo de texto de un prestashop 1.5leermas.php
<script type=”text/javascript” src=”/../../../js/ejemplo.js”></script> 
<p> TEXTO SIEMPRE VISIBLE</p>
<p id=”oculto”> TEXTO OCULTO <a id=”ocultar” href=”#”>Come Back</a></p>
<p><a id=”mostrar” href=”#”>Read More</a></p>

ejemplo.js
$(document).on(‘ready’,function()
{
$(“#ocultar”).click(function(event){
event.preventDefault();
$(“#oculto”).hide(“slow”);
$(“#mostrar”).show(1000);
});

$(“#mostrar”).click(function(event){
event.preventDefault();
$(“#oculto”).show(1000);
$(“#mostrar”).hide(“slow”);
});
});

Este js hace 2 funcionane #ocultar y #mostrar. En un principio el scrip era mas simple mostraba y ocultaba, pero dejaba visible el boton leer mas una vez mostrabamos el contenido, por lo que añadimos el efecto contrario para el leer mas, para poder ocultarlo o mostrarlo segun sea necesario.

 

 

 




No hay comentarios


Puedes dejar el primero : )



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.