How to create a "See more" or "Read more" function?

lydia · August 29, 2020, 9:59am

I am not a coder, and I am trying to resolve the slow loading time on one of my pages which contains profiles and write-ups of different people. They are all in a standard format in ‘boxes’ across the page. Currently we use a hover on every profile, and I suspect that is what is causing the slow loading time of the page.

Without using a repeater, is it possible to create a “see more” or “read more” function to expand and collapse the text for each profile?

I have actually not used a repeater before, but I’ve read up on it.
If I do use a repeater, is it possible to display say two lines of text by default then have a ‘see more’ option? How should I go about doing it?

CODE-NINJA · August 29, 2020, 10:12am

Hello Lydia,

you should perhaps give some more informations about your project.
Perhaps a pic of your project-set-up ?

And yes you can create a “read-more” button also without a repeater.

How to use a repeater depends on the structure of your project.

The main usage of repeater is to project data of your database (the same way like a table but more flexible).

When using a repeater you will probably also need —> a dataset (or you do all by CODE, this way is more flexible).

lydia · August 29, 2020, 2:52pm

Hi @russian-dima

Thanks for the quick reply!
Here’s a mock example below where I’ll have a page full of people’s profiles below (up to 200). It will have their profile picture, name, and a short write-up of their background.

Because the individual’s background write-up may be quite lengthy, I want to add a “read more” clickable link per profile, which is expandable. After expanding it, it can also be collapsible if I click on “read less”.

How can I create a “read-more” button per profile without a repeater?

CODE-NINJA · August 29, 2020, 5:46pm

But don’t you use already a REPEATER?
Isn’t it a REPEATER on the PIC ?

Working without a repeater would be like the following…

You will have no REPEATER on your site, right?
That means, you will have a lot of single Text-fields on your site (i do not understand why you do not want to use repeaters, but this is your choice ^^) .

And your Textfields are surely connected with your database (dataset) ?

So you would have 2-different Text-Types —> SHORT & LONG.
Short-description and long description.

Either both of them in the DB, or the short one directly in the textfield.

I do not know all your set-up, i just assume it is like this.

But before i tell you how to do it, i would suggest you to go a completely another way and perhaps start to use REPEATERs.

The slow performance could also be caused, because you will surely have tons of elements on your page. -----> REPEATER = JUST one ELEMENT!

Repeaters can be directly controlled by datasets, for example of how much items you wanna show at once and how much should be added when expanding the data-view. Or you simply use the pagination-options of the dataset connected with ??? YES —> your REPEATER!

But perhaps i am thinking in a total wrong direction? (Just theoretical thoughts ^^).

Let me know more about your page-set-up and what do you think about my thoughts?

You need an example how to work with repeaters?
You will find some here on this site…
https://russian-dima.wixsite.com/meinewebsite

lydia · August 30, 2020, 8:26am

Hey @russian-dima

You’re totally right about that. We were just using lots of images and single text fields on the page put up one by one. None of us knew about repeaters until I stumbled on it.

I definitely prefer the repeaters as I just need to input the data there and it’s easily movable.

Can I create a clickable “Read/See more” link of the shortened desc instead of adding a button? So in this case i don’t have any Long Description, but I plug the whole chunk of text into the Shortened description. Then I limit the default view to just 2 shortened lines of text. Anything more than 2 lines of text, the viewer has to click “Read/see more”.

CODE-NINJA · August 30, 2020, 8:35am

When you want to use a REPEATER, your next steps should be…

Creating a good prepared DATABASE, with all the needed data in it.
Since you will now use the REPEATER, you want have hundreds of elements on your site (which should improve enormaly the performance of your site).
All the action will be done by the REPEATER (which will take all data out of your database, where you will have stored all your text-parts / text-data and more).

You can imagine it like —> every-data-line in your database, will be an item showed in the repeater (single repeater-box), the same way, like shown on your linked pic…

And for this example your database would be like…

Title         |       Description      |

Santorini | Click hereto add…
Mykonos | Click hereto add…
Santorini | Click hereto add…
…and so on …

I don’t know, but perhaps this post here is interesting for you, too…

https://www.wix.com/corvid/forum/community-discussion/multiple-expandable-text-boxes-error

lydia · August 30, 2020, 8:44am

Yes I have got that repeater done.

How can I make the short description text show a default of 2 lines, and make the rest of the text hidden in an expandable “show more” button?

I was reading about the multi-state boxes , and I’m not sure if I should be following this.
https://support.wix.com/en/article/corvid-tutorial-expand-text-with-a-read-more-link#step-2-rename-your-multi-state-box-and-state

CODE-NINJA · August 30, 2020, 8:48am

You can make it in an easy way and in an not very easy way ^^

But i thin we will take the easy, one…
ADD A NEW COLUMN in your DB and put in the short description as you like.

Now you have a column in your DATABASE filled with short descriptions and long descriptions.

Now you will need the functionality for it…

-when pressing on a button in your repeater (button of an special text), the current description change, from short to long, or vice versa…

Is that what you are missing?

lydia · August 30, 2020, 9:03am

My database will just have a short description column. No long description at all. So I want just the short description text to only display eg default 2 lines or 50 characters or so, and if the reader wants to read the whole short description, they will click that button of a special text, and the current description changes from the shortened version to the long version!

Just like what I’ve shown in this screenshot

Thanks for being so patient.

CODE-NINJA · August 30, 2020, 9:09am

Yes! And this is exactly what i am trying to explain you (my sweety Lydia).

Look…

Create 2-columns in your database (shortDescription / superShortDescription)

into the superShort you put the text in which has your 50-Characters and into the other one you put in your whole description.

But i know what you are looking for, you are looking for the difficult-way.

A CODE-Snipet which will cut off your long-description automatically, right?

lydia · August 30, 2020, 9:14am

Yes correct! I’m looking for A CODE-Snipet to cut off my long-description automatically

Because having c reate 2-columns in my database (shortDescription / superShortDescription) will mean that I have to think of the length of the superShort description from the short description.

How should I proceed? I definitely want the easier way out…
And considering that I want to scale and put like 200 data in my database

CODE-NINJA · August 30, 2020, 9:20am

This function you will find in the given link, i gave you before You did NOT look at it!

const shortTextTwoLength = 354;
// read the full text and store it in the fullTextTwo variable
fullTextTwo = $w("#text3").text;
// grab the number of characters defined in shortTextTwoLength and store them in the shortTextTwo variable
shortTextTwo = fullTextTwo.substr(0, shortTextTwoLength) + "...";

const shortTextTwoLength = 354;
fullTextTwo = $w("#text3").text;
shortTextTwo = fullTextTwo.substr(0, shortTextTwoLength) + "...";

lydia · August 30, 2020, 9:27am

@russian-dima Let me try that out.
I went to your website but wasn’t sure the one I was looking at was the right one! I only saw the shortened text version, but did not see the ‘button’ to read more part.

Does this also allow the text to collapse after I’ve expanded it?

CODE-NINJA · August 30, 2020, 9:28am

@lydia
You can add this functionality later, first get this to work ^^

Do you have already a code or something?
Or do we here all just theoretical ?

lydia · August 30, 2020, 10:01am

@russian-dima I created the repeater, and am just inputting the code as I follow some other online tutorials from other members. But so far I’ve not managed to get it running at all .

There’s no code on my web at all currently.
I couldn’t get your code running. Please see.

Here’s my mock database, with the short description and the long description

I’ve labelled my short description accordingly as #shortdescription

The database appears correctly with the short descriptions up

And I edited your code accordingly (i changed the shortTextTwolength as I wanted to see it work)

const shortTextTwoLength = 50 ;
fullTextTwo = $w( “#shortdescription” ).text;
shortTextTwo = fullTextTwo.substr( 0 , shortTextTwoLength) + “…” ;

CODE-NINJA · August 30, 2020, 10:25am

@lydia

Add a BUTTON outside REPEATER → Label = " Show More " for example
Activate your “Dev-Mode” in editor
Create your first FUNCTION!

function myFunction() {

}

Put in the code you need into this function

function myFunction() {
    const shortTextLength = 50;
    fullText = $w("#text3").text;
    shortText = fullTextTwo.substr(0, shortTextLength) +    "...";
}

Looks already some king of code, right?

You have always at the beginning the onReady-function on every of your pages.
Put into this function the following code…

$w.onReady(function() {
    $w('#button1').onClick(()=>{
    
    
    })
})

This will be your button (button-ID = “button1”) which will be clickable.

Then put code together…

var characterAmount = 5 //Option ---> Amount of characters!
 
$w.onReady(function() {
    $w('#button1').onClick(()=>{
        myFunction();
    })
})

function myFunction() {
    const shortTextLength = characterAmount; 
    fullText = $w("#text3").text;
    shortText = fullTextTwo.substr(0, shortTextLength) +    "...";
}

Now the click onto the button will start the function. You can test it.

Topic		Replies	Views
Is it possible to load more button in each individual repeater? I want to expand the data in the repeater but not burden initial loadtime. Ask the community code , question	0	80	April 26, 2020
Help, please. Multiple pages of repeaters, pagination bar, and Show-more-Show-less (accordion) function bug. Ask the community code , question	3	485	July 13, 2019
Attempting to apply a see more feature for repeater Ask the community code , question	2	174	September 15, 2020
This should be simple .... 3 days now Ask the community code , question	6	183	July 30, 2018
How do I make a "read more" feature? (Multi - State Boxes) Ask the community	2	128	February 9, 2021

How to create a "See more" or "Read more" function?

Related topics