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>
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 : )