Hi all,
Is there any way to create a menu like the Wix Editor menu?
Meaning, I’m trying to find to create buttons that on click will expand into a list, such as the menu below:
Try setting it up with the use of boxes or containers that are the appropriate shape and with a menu list inside which is hidden until the user clicks on the button. Or you can just set it up easily with lightboxes that are setup to appear.
The menu list itself could have hidden elements like the dark framed background that only appears when the user hovers over one of the menu choices or change colour etc when the user clicks on them.
You can see similar in this youtube video from Nayeli (Code Queen) that you could use if you rearranged the desgin.
https://www.youtube.com/watch?v=HmTkf5af0NE
givemeawhisky
are you able to help me with this i am trying to use Wix’s example https://www.wix.com/corvid/example/collapse-elements
and i have succeeded to do it, however i keep getting an error - TypeError: $w(…).collapse is not a function and then it takes me to line 19 which is $w(‘#fold’ + idx).collapse();
but I don’t know what to change there.
Thank you!
Have you opened up the Wix Tutorial in Wix Editor as there you will be able to view the complete code used and not just the snippet shown in the code box at the bottom of the tutorial page.
Also, make sure that all your elements are attached to the appropriate container box for each fold number as in the tutorial and that each of these container boxes are set to be collapsed on load through the properties panel for each container box element.
Plus, make sure that you have added the onClick event in the properties panel for each of the header elements, so that the export functions in the code correspond to your page. Please note that when you add the onClick in the properties panel, it will add it again to your page, however you can simply delete this as you have it already in your code.
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events
Otherwise, please post all your code that you have used here so that we can look at it and see if we can spot where the error is.
This is the code that is from the example, although it doesn’t have the onReady function at the top of it.
if you have only the four options as in the tutorial then it should be exactly the same as this, however, if you add more or have less, then you will either have to add more fold options to the [1,2,3,4] array or take some away from it and the same with the export functions for the header clicks and the folds linked to it too.
$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]
.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);
}
Thank you for your detailed explanations. What I was doing wrong is i didn’t complete the full four folds and i was testing with one fold only and hence the error but now its works perfect
Omg! I can’t believe i did something like that. 
Thanks a bunch!
No worries, everybody always does something that is so silly to somebody else!
Sometimes it is just a case of removing something from the working code and then not remembering what on earth it was and having to ask here for something simple.
Most common mistake is simply not adding an event through the properties panel for an element or not adding it through the code itself. Easily done!
Just remember that nobody is 100% perfect and everybody makes mistakes sometimes 
Awww!!! I am totally loving this place. And people like you make it so wonderful 
I am very glad to have your support.
I am Deb from India, where are you from if you don’t mind me asking what’s your name? Are you a coder?
givemeawhisky
Is there a way i can reduce the bottom part which is created due to the box used in this process, as i need to put content below it. as i have 8 folds and now i have a lot of black space if i visit the live website
When you say that you want to put content underneath it, then why not simply open up your preview and make sure that all the folds are closed and then simply go back to the editor and add your content underneath it.
If you have all your folds closed in your editor then whenever you open one of the folds up, all the content below it will be moved down to adjust for the expanded container box.
Then once the fold is closed again, then all the content should remove back up again and be readjusted to where it was when the container box was collapsed.
If you have a fold open in your editor when you are adding content beneath this fold setup, then you will always have a space between your last fold and it’s collapsed container box, as the added content will always be moving from the set point that you placed it on the page to begin with.
You can see this happen in the tutorial example shown on the tutorial page itself, where you click on one of the areas for the fold to expand and the white container box that all the folds are setup in, also expands too to allow the hidden container boxes to be shown.
So if there was any further content underneath the white background container box, then it would also be shifted down the page and anything under that too, to make room for the container box in the fold setup to be shown.