How to create a collapsible text box in Wix?

Ask the community
,
1

Hi, please can someone be so kind to show me how to create a collapsible text box in Wix? See the photo. Thank you in advance

626×695 66.6 KB

2

  1. Add a repeater to the page.

  2. Create a data array with the titles and full text and assign it to the repeater by code OR connect the repeater to a dataset where you have the fields: title & fullText.

  3. Connect the title element to the data title and the fullText element to the fullText data.’

  4. Add code like this:

let selectedElementId = '';
$w.onReady(() => {
$w('#headerBox').onClick(event => {
selectedElementId = selectedElementId === event.context.itemId ? '' :  event.context.itemId;
$w('#repeater').forEachItem(($i, iData) => {
 if(iData._id === selectedElementId){
  $w('#fullTextBox').expand();
  $w('#plusIcon').collapse();
  $w('#minusIcon').expand();
  //change color
 } else {
  $w('#fullTextBox').collapse();
  $w('#plusIcon').expand();
  $w('#minusIcon').collapse();
  //change color
 }
})
})
})
3

Hey, Thank you so much for your reply. Umm… you know, I’m a novice, I don’t know what is a “repeater”, “data array” etc… . In fact, I am trying to work on my own tourism website using free tools inside wixeditor just to gather all needed information (text, photos etc… ) and have a draft shape of the website before hiring a professional. I am self-teaching myself and love working on it but I know it is taking some time. So if there is any simple version explanation, I would really appreciate. For example if you could show me where can I add a “repeater”, is it inside the same place where you add “strip” “text” “image” etc…? Otherwise, don’t worry, I’ll try to manage and do some more research around what you’ve just explained.
Great thanks again

4

https://support.wix.com/en/article/wix-editor-adding-and-managing-repeaters-lists-grids

PS. in this link it’s a grid layout, but you can set it to have one item per row and design it like your list with collapsible box.

5

Hi,
I’ve used this layout before so I know a bit about it. I will work from there and see.
Thank you so much and have a nice day