I’m trying to add a collapsible box, but I can’t figure out how to do it. I’ve also looked at the help article, but it says to hover on the left of a content box, but when I do that, it doesn’t show the +. It doesn’t show anything but the name of the content box.
And is there a way to do this on the regular Wix site, not Corvid? I’m extremely technologically challenged and I can’t even figure out how to work Corvid. I don’t even see a difference, except that some things are missing.
Thanks!
You are much better doing it through Wix Corvid so that you can have full control over it all.
To do a simple collapse box function, you can either have a button that collapses the box or have the box collapse itself when clicked on. then you would need to have another button to have the box expand again when clicked on - obviously you can’t click on the box again to expand as it will not be there on the page to click on!
There are other options like having the box expand when the screen area that the box is in comes into view, or have it collapse and expand when the user moves their mouse on and off of the box, however it is up to you how you wish to have your box setup.
You simply need to add the onClick event handler through the properties panel of that particular element and the code will automatically get added to your page code for you.
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events
To do it through a simple button
set up then add code something like this with a button1 for collapsing and a button2 for expanding.
export function button1_onclick(event) {
$w("#box1").collapse();
}
export function button2_onclick(event) {
$w("#box1").expand();
}
To get your elements id name which you need to use for the code, then you can either simply hover over the element itself and it will show the id name on the top left of the element with a name similar to #box1.
Or you can right click on the element itself and call up the properties panel for the element if it is not already shown and through the properties panel you can find your elements id name at the top, where you are also able to change the name of you wish to call it something more suitable to your page and code so that you can remember it better.
The code reference for collapse and expand is here which is worth a read.
Also, have a read here about how collapsing elements affect your page.
Notice that there is a difference between using collapse/expand compared to when using hide/show.
Collapse/Expand - CollapsedMixin - Velo API Reference - Wix.com
Hide/Show - HiddenMixin - Velo API Reference - Wix.com
Have a read of this section about working with user events and actions etc.
There are harder examples already through this forum that you can use to see how it all works, this sample below even lets you open it in the Wix Editor with the page already made up with all code added etc.
Or through other Wix Experts sites like Nayeli (Code Queen)
https://codequeen.wixsite.com/double-collapse
https://www.totallycodable.com/wix/corvid/create-custom-faq-with-double-collapse-effect
Or Vorbly.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-EXPANDING-COLLAPSING-TEXT-BOX
https://www.vorbly.com/Vorbly-Code/WIX-CODE-COLLAPSE-OR-EXPAND-FORM-OPTIONS
You can even look at adding effect options to your box when it it collapsed and hidden too.
Also, if you are new to Wix Corvid, then have a read of the Wix Corvid support pages.
https://support.wix.com/en/corvid-by-wix/basics
If you are still struggling with it all then you can look at hiring yourself a Wix Expert through the Wix Arena as shown here.
https://www.wix.com/arena/
However, please note that Wix Corvid looks daunting to begin with, however once you get into doing it yourself you will soon pick things up as you go along and you will gradually start to learn more and more. Even the Wix Admin and Mods from this forum are still learning things too you know!
This forum is for any code related issue that you have, so if you get stuck anywhere with your coding then please come back and add a new post.
Thanks, I’ll read this through. I was hoping for something on Wix though because this is really hard for me to understand, to the point of it almost being gibberish, that’s how technologically challenged I am.
I am trying right now to do a Show More (yes, my original question was for collapsible boxes, and I’m still interested in knowing more about that, but I saw directions for the Show More, so wanted to try it too), but it’s not allowing me to copy and paste the code? I can only copy it, but when I go to paste, there’s no option. Help? Thanks!
Okay, so you are using the show more example from Wix tutorial as shown here.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
You can simply copy the code from the page itself with a right click on the mouse, however to add it to the page code section on your Wix Editor, you will need to paste it using your keyboard commands for paste.
See this page from the Corvid support pages about working in the code panel.
https://support.wix.com/en/article/corvid-working-in-the-code-panel
I have added in the other reply all the code that you need for both options on that tutorial for the show more/show less toggle or the show more button.
You can simply copy and paste that if needed and then just change the parts to suit your own page.
Otherwise, if you are struggling with this Wix example, then I do suggest that you go for the Vorbly option in the previous reply and do it their way as it is much simpler to setup.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-EXPANDING-COLLAPSING-TEXT-BOX
Code for the “Show More” Button
letfullText; // variable to hold the full text
letshortText; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});
export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
Code for the “Show More/Show Less” Toggle Button
letfullText; // variable to hold the full text
letshortText; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
constshortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0,shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});
export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties
// check the contents of the text element
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
Also, note that in that tutorial the above examples are for when you are using static text which is where you have all the text added on your page (known as the full text).
If you have your text stored in a dataset, then you need to use the dynamic option and this is your code that you will need below.
It uses the show more and show less toggle as the option.
letfullText; // variable to hold the full text
letshortText; // variable to hold the short version of the text
$w.onReady(function () {
$w("#dynamicDataset").onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// set the fullText variable to be the text from the collection
fullText = $w('#dynamicDataset').getCurrentItem().textField;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w('#myTextElement').collapse();
$w('#myButton').collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button
if (fullText.length <= shortTextLength) {
$w('#myTextElement').text = fullText;
$w('#myButton').collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + "...";
$w('#myTextElement').text = shortText;
}
}
});
});
export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties
// check the contents of the text element
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
Bless you for doing this! I pasted it and switched out the “#myTextElement” to “#text42” and the button to “#button1”. I’m getting red dots on lines 2, 6, 10, 12, 17 & 23, saying I’ve got errors. What do I need to do to fix it? It’s saying “letshortText is not defined”; “constshortTextLength is not defined”; “shortText is not defined” and “shortTextLength is not defined”
ETA: Okay, got that to work, I think. Some of the words needed a space in them.
Now just need to figure out how to show the rest of the text once the button is clicked. haha
I don’t see an onClick. I don’t think I see a Properties panel either.
ETA2: Okay, found the Properties panel. Typed in the code, and now I’m getting a red dot on the last line, the }. What do I do to fix that? It says, “Parsing error: unexpected token”
ETA3: GOT IT!! YAY! Thank you, givemeawhisky!
I’m trying to do the collapsible boxes now, but it’s not working correctly. I mimicked the boxes and code from the sample website. But only the Headerbox1 and 2 are working. Headerbox3 does not collapse when clicked, and Headerbox4 and its fold doesn’t even show up. What am I doing wrong? I copied and pasted the code.
function toggleFold(index) {
let $fold = $w(‘#fold’ + index);
let $arrowDown = $w(‘#arrowDown’ + index);
let $arrowRight = $w(‘#arrowRight’ + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1,2,3,4]
.filter(idx => idx !== index)
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
$w(‘#arrowDown’ + idx).hide();
$w(‘#arrowRight’ + idx).show();
})
}
export function headerBox1_onClick(event) {
toggleFold(1);
}
export function headerBox2_onClick(event) {
toggleFold(2);
}
export function headerBox3_onClick(event) {
toggleFold(3);
}
export function headerBox4_onClick(event) {
toggleFold(4);
}
export function fold1_click(event) {
//Add your code for this event here:
}
So I am trying to have expanded text within a collapsible box. So collapse first, then have expandable text in the collapsed box.
I was trying to set up the code first for the expanded text, but it makes it into a collapse setup instead (though they don’t collapse). I even deleted the code for collapsing, but it still does that.
Why is it doing that?
And how would I write the code to do this (collapse first, then expandable text)?
Thanks!
Okay, so we can take it that this one is all fixed by yourself now.
The red dots on the side of your code normally just mean something like you haven’t got that element on your page, so if you used $w(“#myButton”).label = “Show more”; and your button id name is actually #button1, then it will show up as an red dot error as you do not have a element on your page called #myButton.
The event handler functions through the properties panel are easy to forget to do, we have all done that in the past too. You can actually write the event handler function into your code itself so that you don’t need to add it through the properties panel for that element.
However, in your case it is best that you stick with adding them through the properties panel currently so that you get used to using it and doing it etc, don’t want things to become more complicated!
If you get stuck with the code I have posted above, then just double check it against the actual tutorial page itself, that way you should notice what is wrong.
Finally, with the parsing error and unexpected token, that just means that you either have too many or two few of the things that we call curly brackets and parentheses, which are the {} and the ().
All code must have matching pairs (equal numbers) of open curly brackets { and closed curly brackets }. The same with the parentheses with matching pairs of open ( and closed ).
First off this tutorial makes use of container boxes which are basically boxes which have elements attached inside of them, so in theory when you move the box all the attached elements move with it.
The same apples to when you collapse and expand the bpx too, all the attached elements will have the same actions too.
See this Wix page for more info on it.
https://support.wix.com/en/article/attaching-elements-to-a-box
When you say you have copied and pasted the code, that is great. However, have you also made sure that you have also added the onClick event handlers to the elements through their properties panel.
Like you did for the text example previously, all the elements called #headerbox 1 to 4 which are the container boxes, will need to make sure that they all have onClick event handler added to them through the properties panel.
Also, make sure that the containers called #fold 1 to 4 are all set up to be collapsed on load too.
With your code on your page…
You will need to delete the last export function off of your code as you have added it for the #fold which is not needed.
export function fold1_click(event) {
//Add your code for this event here:
}
It should look like this from the example page code, with just the pages onReady function added at the top.
$w.onReady(function () {
functiontoggleFold(index) {
let$fold = $w('#fold' + index);
let$arrowDown = $w('#arrowDown'+ index);
let$arrowRight = $w('#arrowRight'+ index);
// toggle the fold at the index
if($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else{
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1,2,3,4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold'+ idx).collapse();
$w('#arrowDown'+ idx).hide();
$w('#arrowRight'+ idx).show();
})
}
export functionheaderBox1_onClick(event) {
toggleFold(1);
}
export functionheaderBox2_onClick(event) {
toggleFold(2);
}
export functionheaderBox3_onClick(event) {
toggleFold(3);
}
export functionheaderBox4_onClick(event) {
toggleFold(4);
}
With this one, what are you actually trying to accomplish as you can’t expand text in a box that is collapsed.
Do you want a box element to collapse and then a text element to be expanded?
If you do then you simply need to add code to suit that, so let us use our previous example again and say you have a button again to collapse the box, however this time you will want a text box element to expand in its place.
export function button1_onclick(event) {
$w("#box1").collapse();
$w("#text1").expand();
}
export function button2_onclick(event) {
$w("#box1").expand();
$w("#text1").collapse();
}
You will need to make sure that the text box element is setup to be collapsed on load through the properties panel, like you have done in the Wix tutorial previously.
It doesn’t need to be a button to make the box collapse, it can be another text box element or a image element etc, the choice is yours.
It sounds to me like you are trying to accomplish something similar to what is in the Vorbly tutorial.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-EXPANDING-COLLAPSING-TEXT-BOX
This tutorial is easy to follow and you only need to add a main box which can be designed as you like with another text box and button attached to it.
Again it doesn’t need to be a button again, it can simply just be another text box that you design to be the same as the main text, you just need to make sure that id name is changed if you use something different.
Then you just simply add your text into the text box and add the code from the example page into your page code in your editor and simply change the elements id names to suit yours.
All the code is doing in this example is telling the text to be shown as short text with a limit of 200 characters when the button is clicked whilst it says show less and to show the full text when the button is clicked whilst it says show more.
If you want a smaller amount of characters shown in the short text version, then simply change the 200 number in the three places to the required number of characters that you prefer.
Although I would always suggest that if you are copying a tutorial or example that you keep the id names of any elements the same as to what they have used in the process themselves, as that way all the code will be relevant and correct and you won’t need to worry about changing anything.
Obviously, when you do your own coding you will want to keep the id names relevant to what you are doing and not have say 50 text boxes simply called #text 1 to 50 etc.
I tried to make 5 boxes, but when I click on BOX 5, it’s controlling BOX 4 too. BOX 4’s own commands work, but doing anything with BOX 5 adds to it. For instance, if I click to open BOX 4 with BOX 4 ARROW, it’ll open it correctly, but then when I clock the BOX 5 ARROW, it closes BOX 4 and opens BOX 5.
Here is the code:
(Also, I am aware it says ArrowRight, but it’s not affecting the code, that I know of, because it worked fine before I added the 5th box, which makes me know it’s glitchy. So I don’t know if this current problem is a glitch or a coding error.)
export function fold1_click(event) {
//Add your code for this event here:
}
export function fold2_click(event) {
//Add your code for this event here:
}
export function fold3_click(event) {
//Add your code for this event here:
}
export function fold4_click(event) {
//Add your code for this event here:
}
export function fold5_click(event) {
//Add your code for this event here:
}
function toggleFold(index) {
let $fold = $w(‘#fold’ + index);
let $arrowDown = $w(‘#arrowDown’ + index);
let $arrowRight = $w(‘#arrowUp’ + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowUp.hide();
}
else {
$fold.collapse();
$arrowUp.hide();
$arrowDown.show();
}
// collapse the other folds
[1,2,3,4,5]
.filter(idx => idx !== index)
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
$w(‘#arrowUp’ + idx).hide();
$w(‘#arrowDown’ + idx).show();
})
}
export function headerBox1_click(event) {
toggleFold(1);
}
export function headerBox2_click(event) {
toggleFold(2);
}
export function headerBox3_click(event) {
toggleFold(3);
}
export function headerBox4_click(event) {
toggleFold(4);
}
export function headerBox5_click(event) {
toggleFold(5);
}
export function arrowUp1_click(event) {
//Add your code for this event here:
}
export function arrowUp2_click(event) {
//Add your code for this event here:
}
export function arrowUp3_click(event) {
//Add your code for this event here:
}
export function arrowUp4_click(event) {
//Add your code for this event here:
}
export function arrowUp5_click(event) {
//Add your code for this event here:
}
export function arrowDown1_click(event) {
//Add your code for this event here:
}
export function arrowDown2_click(event) {
//Add your code for this event here:
}
export function arrowDown3_click(event) {
//Add your code for this event here:
}
export function arrowDown4_click(event) {
//Add your code for this event here:
}
export function arrowDown5_click(event) {
//Add your code for this event here:
}
All you have to do is to make sure that you have setup the extra fifth box the same as all the rest with the onClick event handler added to the #headerBox5 container box and the #fold5 container box set to be collapsed on load.
You only need this on your page, just like the original tutorial code.
https://www.wix.com/corvid/example/collapse-elements
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowUp' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowUp.hide();
}
else {
$fold.collapse();
$arrowUp.hide();
$arrowDown.show();
}
// collapse the other folds
[1,2,3,4,5]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowUp' + idx).hide();
$w('#arrowDown' + idx).show();
})
}
export functionheaderBox1_click(event) {
toggleFold(1);
}
export functionheaderBox2_click(event) {
toggleFold(2);
}
export functionheaderBox3_click(event) {
toggleFold(3);
}
export function headerBox4_click(event) {
toggleFold(4);
}
export functionheaderBox5_click(event) {
toggleFold(5);
}
The #arrowRight and #arrowDown and #fold elements don’t have the onClick event handler added to them as it is all done in the code.
All those extra export functions above and below it you can simply delete.
export function fold1_click(event) {
//Add your code for this event here:
}
export function fold2_click(event) {
//Add your code for this event here:
}
export function fold3_click(event) {
//Add your code for this event here:
}
export function fold4_click(event) {
//Add your code for this event here:
}
export function fold5_click(event) {
//Add your code for this event here:
}
export function arrowUp1_click(event) {
//Add your code for this event here:
}
export function arrowUp2_click(event) {
//Add your code for this event here:
}
export function arrowUp3_click(event) {
//Add your code for this event here:
}
export function arrowUp4_click(event) {
//Add your code for this event here:
}
export function arrowUp5_click(event) {
//Add your code for this event here:
}
export function arrowDown1_click(event) {
//Add your code for this event here:
}
export function arrowDown2_click(event) {
//Add your code for this event here:
}
export function arrowDown3_click(event) {
//Add your code for this event here:
}
export function arrowDown4_click(event) {
//Add your code for this event here:
}
export function arrowDown5_click(event) {
//Add your code for this event here:
}
Hi,
It’s still controlling BOX 4. Should I be doing something additional?
“All you have to do is to make sure that you have setup the extra fifth box the same as all the rest with the onClick event handler added to the #headerBox5 container box and the #fold5 container box set to be collapsed on load.”
–Yes, as far as I can tell, these were set up the same for BOX 5.
Thanks!
Have just tested it myself using the tutorial example and it all works fine for me.
https://givemeawhisky.wixsite.com/collapse-test
Again make sure that you have setup the extra fifth box the same as all the rest with the onClick event handler added to the #headerBox5 container box and the #fold5 container box set to be collapsed on load, along with naming the arrows correctly as #arrowRight5 and #arrowDown5 which also needs to be set as hidden on load too.
Code Used:
$w.onReady(function () {
});
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1,2,3,4,5]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}
export function headerBox1_onClick(event) {
toggleFold(1);
}
export function headerBox2_onClick(event) {
toggleFold(2);
}
export function headerBox3_onClick(event) {
toggleFold(3);
}
export function headerBox4_onClick(event) {
toggleFold(4);
}
export function headerBox5_onClick(event) {
toggleFold(5);
}