Read more button

Questions
1

Hi Stefan,

I have read your answer about my topic:

I want to have a paragraph in which not all the text is visible and when I press the read more button, all the rest of the text will appear.

And how do I add the button to show the rest of the text?

image
image692×732 45.5 KB

2

By the way… The review widget didn’t have names and profile photos so I need to configure the review swiper by myself.

3

Hi Stefan

How can I create a button that will show or hide the paragraph texts?

4

Hi Stefan
Is there an option to do that from the builder?
@Pakic

5

Hey @Stolichnaya, you would need to involve custom code here, in this codepen that you posted you have all the stuff that you need, if you are not sure how to use it I will help you.

1 Like
6

Hi Darko,

I couldn’t understand how to do it.

I would appreciate a video tutorial.

1 Like
7

Here it is: Loom | Free Screen & Video Recording Software | Loom

Here is the code you need:

$(“#toggle”).click(function() {
var elem = $(“#toggle”).text();
if (elem == “Read More”) {
//Stuff to do when btn is in the read more state
$(“#toggle”).text(“Read Less”);
$(“#text”).slideDown();
} else {
//Stuff to do when btn is in the read less state
$(“#toggle”).text(“Read More”);
$(“#text”).slideUp();
}
});

2 Likes
8

@Darko Thanks a lot

Many users will find this tutorial very helpful!

Please edit the comment and add the code :slight_smile:

1 Like
9

Hi @Darko

The code that you shared here is not working.

You missed some parts of it.

Please update your comment or delete it.

The full working code is:

$(document).ready(function() {
$(“#toggle”).click(function() {
var elem = $(“#toggle”).text();
if (elem == “Read More”) {
//Stuff to do when btn is in the read more state
$(“#toggle”).text(“Read Less”);
$(“#text”).slideDown();
} else {
//Stuff to do when btn is in the read less state
$(“#toggle”).text(“Read More”);
$(“#text”).slideUp();
}
});
});

Source code:

Thanks for the instructions :slight_smile:

10

@Darko

Hi Darko,

This doesn’t work when I add the cards to the swiper plugin.

The button doesn’t work when I duplicate the cards for the swiper.

It only works on the first card.

11

@Darko I tried following these directions, can’t seem to get it working though, nothing happens when I click the ‘Read More’ button. I tried your script and @Stolichnaya’s script, in both cases nothing.

2min video of me following the steps in the tutorial but button does not work

Help please to get this working!

Site I am working on: https://tattoo-studio.divhunt.art/

Edit: I got it working. When I copy the JavaScript directly from the Codepen linked by @Stolichnaya instead from from the forum post here, then it works… go figure.