Ayuda con "Leer más" de JQuery

K

Hola buenas, tengo un problema:
Estoy intentando poner el típico "Leer más" en un artículo de mi página web. El problema es que quiero que el texto a mostrar cuando pulsas "Leer más" esté oculto por defecto, además, cuando pulso leer más, se sigue quedando en el mismo sitio, en vez de quedarse al final del artículo.
Este es el código que estoy utilizando, gracias de antemano:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a").click(function(){
        $(".rmore").slideToggle();
    });
});
</script>
</head>
</head>
<body>
<h2 style="text-align: center;"><span style="font-size: 75%; color: #800080;">Productos de Alimentación Ecológicos</span></h2>
<p style="text-align: justify;">    En la <span style="color: #000000;">alimentación ecológica</span> se trata de utilizar procedimientos y técnicas sin el uso de herbicidas o fertilizantes químicos, dañinos para el medio ambiente y para nuestra salud. De este modo los alimentos que se obtienen son de <span style="color: #000000;">mejor calidad</span>, mejor sabor y más nutritivos.</p> <a href="#">Leer más...</a>


<p style="text-align: justify;" class="rmore">    Entre los beneficios de consumir productos ecológicos encontramos:</p>

<ul style="text-align: justify;" class="rmore">
 	<li>Utilizan recursos energéticos renovables y locales.</li>
 	<li>Al ser cultivados en suelos equilibrados por fertilizantes naturales, contienen un nivel más alto de vitaminas que los productos convencionales.</li>
 	<li>No contienen pesticidas. Los pesticidas no sólo dañan la salud, también al trabajador que los manipula y al medio ambiente.</li>
 	<li>Son sostenibles con el medio ambiente. Mantienen los hábitats de los animales silvestres, respetan los ciclos naturales de los cultivos, reciclan los nutrientes incorporándolos de nuevo al suelo como abonos orgánicos.</li>
 	<li>Tienen máximos niveles de calidad. Todos los agentes que intervienen en la cadena agroalimentaria están sujetos a inspección y certificación de las materias primas utilizadas.</li>
 	<li>Al ser elaborados de forma artesanal son más sabrosos. Además, las plantas crecen más sanas conservando su aroma, color y sabor.</li>
</ul>
<p style="text-align: justify;" class="rmore">    En Della Terra ofrecemos productos ecológicos de alimentación de la mejor calidad al mejor precio. Tenemos productos orgánicos, de comercio justo, sin gluten, sin azúcar, veganos, vegetarianos, raw y superalimentos. Elige entre más de 70 marcas: Biona, Raw Health, Oatly, Dr.Goerg, Amisa, Yogi Tea, I Choc, Whole Earth, La Bio Idea, Jason, Cattier, Holle, Smileat, Ecover, Attitude y muchas más.</p>
<p style="text-align: justify;" class="rmore">    Conoce toda nuestra gama de productos: aceites y vinagres, bebidas vegetales, café,  tés e infusiones, cereales de desayuno, chocolates y dulces, cremas para cocinar y untar, miel, sirope de agave, frutos secos, semillas, deshidratados, galletas, harinas, mermeladas, panes, pastas y mucho más, todo de agricultura ecológica.</p>
</body>
Vergara92

Crea un div, que contenga todo lo que quieres que esté oculto y le pones la clase rmore (Y se lo quitas a todo lo demás) a este div le pones display: none; y en el script en la parte de:

$(".rmore").slideToggle();  

Lo sustituyes por:

$(".rmore").toggle();
1
MrTurbo

#1 https://jsfiddle.net/b1ycr5qq/

2 1 respuesta
K

#3 Perfecto! Y se me había olvidado comentar que una vez se abre, faltaría poner "leer menos" para que se cierre.

1 respuesta
Troyer

#4 https://jsfiddle.net/b1ycr5qq/1/

1 1 respuesta
K

#5 Muchas gracias!

Usuarios habituales