En ocasiones, el contenido de una página de nuestro sitio web puede ser demasiado extenso y provocar que el usuario de la misma tenga la necesidad de hacer scroll continuamente. Para evitar esto, es una buena práctica mostrar una parte del texto y añadir un enlace con la opción "Ver más" que desplegaría el resto del contenido.
Para ello colocamos el texto que, inicialmente, no vamos a mostrar en un div oculto:
También debemos crear el link "Ver más", que hará que se desplegue el texto al pinchar sobre él:
Si no queremos que al pinchar sobre el link "Ver más" nos salte al comienzo de la página, sino se quede donde estamos lo hacemos de esta manera:
Como comentamos anteriormente, al pinchar sobre el link "Ver más" se visualizará el contenido oculto y, además, aparecerá otro botón "Ver menos" para volver a ocultar el texto:
Para darle funcionalidad a los enlaces añadimos una referencia a la librería de jquery y utilizamos el siguiente código javascript:
A continuación podemos ver un ejemplo del funcionamiento del código:
Ver más
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac laoreet urna. Fusce quis ullamcorper odio. Vestibulum est magna, consequat eget mi vel, faucibus semper neque. Nulla ornare ante id nisl mattis venenatis. Nam eu neque lacus. Donec non gravida nulla, ut gravida libero. Cras condimentum tincidunt tincidunt. Donec ac magna varius, adipiscing dui nec, lacinia lacus. Vestibulum vitae lobortis nisl, in eleifend tortor. Quisque eget ultricies mi, vel ullamcorper justo. Fusce auctor purus sit amet felis pretium malesuada. Curabitur pellentesque malesuada sem nec rhoncus. In hac habitasse platea dictumst. Nulla pretium venenatis pulvinar. Phasellus dapibus congue volutpat. Integer dictum tempor velit nec fermentum.
Ver menos