Is it possible to edit the “addmore” button so that more information is displayed at the bottom, as shown below on this website?
Hi ahmi,
I made an example of one way this can be achieved its in this url:
https://idoh33.editorx.io/mysite-12-1
First, I created a section with 3 grid columns, then I added a container to each column and gave it a grid of 5 rows, into each cell i put an image and I set all of my grid rows (in the section and inner containers) to max-content, also remember to set all the min-heights, you can set the layout however you like just remember the max-contents and min-height. from your section and containers to none, I turned on dev mode and I set all the images that are not supposed to appear when the page loads to be collapsed and hidden on load.
I wanted to divide the images into 3 groups where each time I click see more another group of images is revealed. I gave them their own id’s and in the code I selected them as three groups where each group goes to an array “cell”. I have it commented in the code.
so basically every time you click see more a group of images expands and because everything is set to max content the grid cell where the image lives in also expands.
I added the “see more” in a narrow section of its own.
Here is the Code that I used:
$w.onReady(function () {
//make an array of image groups
let collapsed = [];
// an index to increment, we use this to go thorough the array
let i = 0;
//this is a boolean (true false flag) that we use in order to determine if the transition animation is complete,
//we use this because we don't want the user to be able to click again before the content appears and the page scrolls down.
let animationComplete = true;
//push the groups of images in to the array
collapsed.push($w('#image01, #image02, #image03'));
collapsed.push($w('#image04, #image05, #image06'));
collapsed.push($w('#image07, #image08, #image09'));
//Event listener that listens when "see more" is clicked
$w('#text3').onClick(() => {
// conditional statement that checks: a. if we have more images to reveal b. if the animation transition is complete
if (i < collapsed.length && animationComplete) {
//set the animationComplete to false
animationComplete = false;
//this code expands a group of images and also sets them to show with a fade transition, then scrolls down to the "see more"
//at the end of the code it increments the index and sets the animationComplete flag to true
collapsed[i].expand().then(() => {
collapsed[i].show('fade', { duration: 300 }).then(() => {
$w('#section4').scrollTo().then(() => {
i++;
animationComplete = true;
});
});
})
}
})
});
This is one way of doing it. Another way is, if you are familiar with working with CMS (database collections) in Editor X, you can use a repeater or a pro gallery that are connected to data, use a data-set and limit the number of items to display, then you can add a “load more” button (any button), connect it to the data set as well, and set it’s functionality to “load more”. This way does not involve code on one hand, but limits you in terms of layout on the other hand.
Hope this helps you,
Ido.
Hi Ido.
It worked very well. Thanks a lot!
I’d also like to ask you this.
Is there any way to make the showmore button disappear after the last item is displayed?
Yes, you can add an if statement that determines if you are on your last click, if so collapse the “see more”.
$w.onReady(function () {
//make an array of image groups
let collapsed = [];
// an index to increment, we use this to go thorough the array
let i = 0;
//this is a boolean (true false flag) that we use in order to determine if the transition animation is complete,
//we use this because we don't want the user to be able to click before the content apears and the page scrolls down.
let animationComplete = true;
//push the groups of images in to the array
collapsed.push($w('#image01, #image02, #image03'));
collapsed.push($w('#image04, #image05, #image06'));
collapsed.push($w('#image07, #image08, #image09'));
//Event listener that listens when "see more" is clicked
$w('#text3').onClick(() => {
// conditional statement that checks: a. if we have more images to reveal b. if the animation transition is complete
if (i < collapsed.length && animationComplete) {
//set the animationComplete to false
animationComplete = false;
//this code expands a group of images and also setes them to show with a fade transition, then scrolls down to the "see more"
//at the end of the code it increments the index and sets the animationComplete flag to true
//if you are on your last click collapse the "see more" section
if (i === collapsed.length-1) {
$w('#section4').collapse();
}
collapsed[i].expand().then(() => {
collapsed[i].show('fade', { duration: 300 }).then(() => {
$w('#section4').scrollTo().then(() => {
i++;
animationComplete = true;
});
});
})
}
})
});
Thank you very much.
When I click on the button, sometimes the content is displayed and sometimes it is not. Is this a bug?
https://idoh33.editorx.io/mysite-12-1
That is sometimes the case with this site.
Hey @ahmi,
I’m Shiri from the Editor X team, thank you for reaching out.
We have attempted to reproduce and have not been able to. It will be best for you to get live support. You can contact support here , they will be happy to bring up your site and help you fix it.