This was so helpful. Thank you. Can you advise how to make all other multi-state boxes automatically collapse when a user clicks on one particular multi-state box?
Great tutorial. Thank you very much! Is there any chance to create a direct URL to a expanded section? So that I can for example link from an email campaign to your service question? Can I use a URL suffix to do this?
Glad you enjoyed the tutorial. As far as I am aware, Wix does not directly support linking to a specific expanded section or accordion on a page using a direct URL. However, there are a couple of workarounds you could consider: Use Anchors: You can add an anchor to a specific point on your page, such as the expanded section of your content. Then, you can link to this anchor from elsewhere on your site. The limitation is that this doesn't automatically expand a closed accordion section; it simply brings that part of the page into view. Separate Pages: If it's crucial for users to land directly on an expanded section, consider making each section its own page. This way, you can link directly to the appropriate page. I will also mention to our team about expanding on this in future videos but hope this was helpful :)
great video friends, is there option when we create 2 multi-state box and click on second one first one automatically collapses? (similar to faq but multi-box feature_
Hi Riley To create an interaction where clicking on a second multi-state box causes the first one to collapse (or hide), you will likely need to use Wix's built-in Corvid development tools, which allow you to add JavaScript code to your Wix site to create more advanced and customized interactions. Here's a helpful link for you on how to set it up dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code
I don't know if you'll see this but I am wondering how I can code my expand and collapse buttons to make what is pushed down (in this example when apple was expanded it pushed down pear) animated. Or at least to have a softer push down. The harshness of the push-down is off putting to a client and I cant figure out how to make it push down with ease or softness. I hope this makes sense! Thank you!
Hi there! Hope we can help with this. On Wix, using the Wix Editor (not Editor X), creating a fade animation for the expand and collapse of collapsible sections might require a mix of using the platform's tools and a bit of custom work. Here's a step-by-step guide to help you: Add a Collapsible Section: If you haven't already, drag and drop a collapsible section (Accordion) to your site from the Wix Editor's "Add" menu. Select the Section: Click on the collapsible section (Accordion) you've added to your page. Button Settings: Once you've selected the collapsible section, click on the Settings or the gear icon. Navigate to the Design tab and select the style that's closest to your preference. Modify the design as per your requirements, like colour, font, etc. Custom Animation with Wix Code: Wix allows a bit of custom functionality using Wix Code (also known as Corvid by Wix). You'll need to use it to get a fade effect. First, enable Wix Code by turning on the Dev Mode from the top menu. Then, you can add code to the page's Page Code section to control the visibility and fade effect of your collapsible section. For example: import wixWindow from 'wix-window'; $w.onReady(function () { $w("#yourCollapsibleSectionID").collapse(); $w("#yourButtonOrTriggerID").onClick(() => { if ($w("#yourCollapsibleSectionID").collapsed) { $w("#yourCollapsibleSectionID").expand(); $w("#yourCollapsibleSectionID").show("fade"); } else { $w("#yourCollapsibleSectionID").hide("fade"); $w("#yourCollapsibleSectionID").collapse(); } }); }); Replace yourCollapsibleSectionID with the actual ID of your collapsible section and yourButtonOrTriggerID with the ID of the button or element you're using to trigger the expand/collapse action. Review and Test: After setting everything up, ensure you preview and test your website to confirm that the fade animation works smoothly on the collapsible sections. Let us know if this helps fix the issue :)
When I use this code and I duplicate the first multistatebox it overlaps the second box. It does not push it down like yours. Do you know of a fix? Thank you
Hi there, this tutorial should show how to do this but when you add the multistate box, make sure the state names and ID names are correct and this should fix your problem :)
Can't seem to see it in the interactive add elements section of Wix anymore. Do you happen to where it can be found and if there are any templates with expandable boxes already in them?
The original code worked, but when I copied it and changed the values for it to collapse, the multi-state box does not collapse. What am I doing wrong? I’ve doubled that checked the code 10 times.
Sorry to hear you're having issues. One work around to fix this could be selecting the element and make it collapsed buy default. You can add an ID so you can target it with code
So for this I typed in $w('#elementname') - so in this case #vectorimage1 and this is to grab this specific element/ID to do something, which in this case is to start a collapsible section.
This doesn't work with repeaters. :( I couldn't get it to attatch, which sucks as I wanted to use this for a team bio page that drops down so it's not super "wall of text" - anyone found a workaround or creative solution to dropdown/state change repeaters?
Hi there, unfortunately there's no option to apply the multi-state box onto the Repeaters. Best Method would be to use the strips, separate and add them to each column of that strip - then copy and paste the multi-state box along side with the code (with different ID names) in each column you create. Let us know if this helps :)
Hi Daniel Yes, you should be able to add collapsible sections on a Wix website using Editor X. Collapsible sections, also known as accordions, can help to make content more organized and user-friendly, particularly on pages with a lot of information. Here are some steps that should help to do this: In the Editor X interface, select the 'Add' option from the left-hand side menu. Then navigate to 'Containers' or 'Interactive'. Look for the 'Accordion' option. Accordion is essentially a term used for collapsible sections. Click on 'Accordion' to add it to your site. Once the accordion is added to the page, you can customize its look and feel according to your needs. You can add content, adjust the size, color, font, and more. After making adjustments, remember to save your changes and preview the collapsible section to ensure it works as expected.
Sorry to hear that you are still having trouble with this but thank you for brining it to our attention. I will flag this to our team to check Wix and do an updated video.
Not working for me either. checked the code so many times. Keep getting this in the Dev Console when I preview my page - 'To debug this code in your browser's dev tools, open q8jdy.js.' @@Profiletree have you managed to find out any more information?
We hope you enjoyed the video and let us know your thoughts below
Just followed this step by step and improved the look and feel of some pages! Thank you! :)
A perfectly paced tutorial. Thanks
Thanks! Clear and concise. Very nice, thumbs up to you, sir!
any chance there's a way to do it while in a client review slide? its static atm and wont change with the slide
Wow bro! Thanks so much
So glad you found our Wix video helpful! Did you get your website set up? :)
This was so helpful. Thank you. Can you advise how to make all other multi-state boxes automatically collapse when a user clicks on one particular multi-state box?
Glad you found the video helpful. I have forwarded on your question to our team for some help for you :)
Thanks!
Great tutorial. Thank you very much! Is there any chance to create a direct URL to a expanded section? So that I can for example link from an email campaign to your service question? Can I use a URL suffix to do this?
Glad you enjoyed the tutorial.
As far as I am aware, Wix does not directly support linking to a specific expanded section or accordion on a page using a direct URL.
However, there are a couple of workarounds you could consider:
Use Anchors: You can add an anchor to a specific point on your page, such as the expanded section of your content. Then, you can link to this anchor from elsewhere on your site. The limitation is that this doesn't automatically expand a closed accordion section; it simply brings that part of the page into view.
Separate Pages: If it's crucial for users to land directly on an expanded section, consider making each section its own page. This way, you can link directly to the appropriate page.
I will also mention to our team about expanding on this in future videos but hope this was helpful :)
great video friends, is there option when we create 2 multi-state box and click on second one first one automatically collapses? (similar to faq but multi-box feature_
Hi Riley
To create an interaction where clicking on a second multi-state box causes the first one to collapse (or hide), you will likely need to use Wix's built-in Corvid development tools, which allow you to add JavaScript code to your Wix site to create more advanced and customized interactions.
Here's a helpful link for you on how to set it up
dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code
I don't know if you'll see this but I am wondering how I can code my expand and collapse buttons to make what is pushed down (in this example when apple was expanded it pushed down pear) animated. Or at least to have a softer push down. The harshness of the push-down is off putting to a client and I cant figure out how to make it push down with ease or softness. I hope this makes sense! Thank you!
I guess what im asking is how to I animate the expand and collapse to a fade?
Hi there!
Hope we can help with this.
On Wix, using the Wix Editor (not Editor X), creating a fade animation for the expand and collapse of collapsible sections might require a mix of using the platform's tools and a bit of custom work. Here's a step-by-step guide to help you:
Add a Collapsible Section: If you haven't already, drag and drop a collapsible section (Accordion) to your site from the Wix Editor's "Add" menu.
Select the Section: Click on the collapsible section (Accordion) you've added to your page.
Button Settings:
Once you've selected the collapsible section, click on the Settings or the gear icon.
Navigate to the Design tab and select the style that's closest to your preference.
Modify the design as per your requirements, like colour, font, etc.
Custom Animation with Wix Code:
Wix allows a bit of custom functionality using Wix Code (also known as Corvid by Wix). You'll need to use it to get a fade effect.
First, enable Wix Code by turning on the Dev Mode from the top menu.
Then, you can add code to the page's Page Code section to control the visibility and fade effect of your collapsible section.
For example:
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#yourCollapsibleSectionID").collapse();
$w("#yourButtonOrTriggerID").onClick(() => {
if ($w("#yourCollapsibleSectionID").collapsed) {
$w("#yourCollapsibleSectionID").expand();
$w("#yourCollapsibleSectionID").show("fade");
} else {
$w("#yourCollapsibleSectionID").hide("fade");
$w("#yourCollapsibleSectionID").collapse();
}
});
});
Replace yourCollapsibleSectionID with the actual ID of your collapsible section and yourButtonOrTriggerID with the ID of the button or element you're using to trigger the expand/collapse action.
Review and Test: After setting everything up, ensure you preview and test your website to confirm that the fade animation works smoothly on the collapsible sections.
Let us know if this helps fix the issue :)
Is there a way to make it animated like a smooth/animated reveal of the section? With controling the speed of the reveal also?
Yes. Wix added a special element called FAQs, which you can use as expanding / collapsing panels and multi-state boxes
the changestate isn't a command on wix anymore, what do you suggest to use?
Thank you very much. You are very helpful.
You are welcome! Glad you enjoyed the video :)
When I use this code and I duplicate the first multistatebox it overlaps the second box. It does not push it down like yours. Do you know of a fix? Thank you
Hi there, this tutorial should show how to do this but when you add the multistate box, make sure the state names and ID names are correct and this should fix your problem :)
Guys, this is great! Thanks so much!
Glad you enjoyed the video and found it helpful :)
Thank you! Such a lifesaver
Can't seem to see it in the interactive add elements section of Wix anymore. Do you happen to where it can be found and if there are any templates with expandable boxes already in them?
You need to activate dev mode
Thank you for the reply Louie :)
The original code worked, but when I copied it and changed the values for it to collapse, the multi-state box does not collapse. What am I doing wrong?
I’ve doubled that checked the code 10 times.
Sorry to hear you're having issues. One work around to fix this could be selecting the element and make it collapsed buy default. You can add an ID so you can target it with code
is there any way to add a animation to it?
What did you add on after "onclick"
So for this I typed in $w('#elementname') - so in this case #vectorimage1 and this is to grab this specific element/ID to do something, which in this case is to start a collapsible section.
@@Profiletree Thanks
This doesn't work with repeaters. :( I couldn't get it to attatch, which sucks as I wanted to use this for a team bio page that drops down so it's not super "wall of text" - anyone found a workaround or creative solution to dropdown/state change repeaters?
Hi there, unfortunately there's no option to apply the multi-state box onto the Repeaters.
Best Method would be to use the strips, separate and add them to each column of that strip - then copy and paste the multi-state box along side with the code (with different ID names) in each column you create. Let us know if this helps :)
is there a way to do it on ediotr x?
Hi Daniel
Yes, you should be able to add collapsible sections on a Wix website using Editor X. Collapsible sections, also known as accordions, can help to make content more organized and user-friendly, particularly on pages with a lot of information.
Here are some steps that should help to do this:
In the Editor X interface, select the 'Add' option from the left-hand side menu.
Then navigate to 'Containers' or 'Interactive'.
Look for the 'Accordion' option. Accordion is essentially a term used for collapsible sections.
Click on 'Accordion' to add it to your site.
Once the accordion is added to the page, you can customize its look and feel according to your needs. You can add content, adjust the size, color, font, and more.
After making adjustments, remember to save your changes and preview the collapsible section to ensure it works as expected.
@@Profiletree amazing! I’m gonna try it today! Thank you!
do not work... It says you have to debug ... I checked everything 100 times.. no result
Same, I'm guessing something has changed in Wix
Sorry to hear that you are still having trouble with this but thank you for brining it to our attention. I will flag this to our team to check Wix and do an updated video.
Not working for me either. checked the code so many times. Keep getting this in the Dev Console when I preview my page - 'To debug this code in your browser's dev tools, open q8jdy.js.' @@Profiletree have you managed to find out any more information?
@@Profiletree I did it just the way it was asked, it is not working