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 una respuesta

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.