Great explanation of how to set up the collapsible boxes! Another issue: I'm hoping to set up a menu above my collapsible boxes with anchor links to different subheaders above each of the boxes. However, the anchor links navigate to the place in the page where the subheaders would be if the box was open instead of collapsed/hidden. Does anybody have a solution? Double clicking on the page length tab at the bottom of the page doesn't seem to help. Thanks!
Thanks for the great video. The desktop version is super and works wonderfully. Unfortunately, the mobile version, like always with WIX, opens like so many scrambled eggs. Question: I was able to organize all of the items in the mobile version but when opening the page, the default view is the strips expanded with the click boxes all showing the plus sign. Any help here?
Great tutorial! I did everything as shown in the video but my + and - signs don’t work. The section expands when I click anywhere in the box but the + or - button (so for example on the text or just right next to / above / below the button). Anyone know how to solve this?
seriously. I moved from Squarespace because of some key missing features, but this was one thing they made really simple. I was upset when i was using the collapsable text on wix. it is so boring.
Hi guy ! Nice video ! however I can't get your code to work on editor x Is there a report? I still feel like I did everything as you say. I created a section: id section123 in this section I created a container: id box205 In this container is a button: stepOneCollapseButton two images: StepOnePlusSign and stepOneMinusSign I created just below a new section: id sectionstepone Within this section is a stepOneCollapibleStrip container Yes I know that there are already ready-made accordions ;) but we can't personalize and add images on the title part I hope you will have 5 min to answer me... I'm really struggling ;)
Was not able to accomplish the fade with this method, but you can accomplish the fade effect using the multi-state box method. Learn more here: www.wixfix.com/post/msb-collapsible-sections In the Multi-State Boxes settings, you can set the transition between the states. Hope that helps!
Seriously what a skill you have! I've never coded anything in my life and I needed to for this exact purpose on my business website. This tutorial is super easy and straight forward and looks INCREDIBLE on my site now. THANK YOU!! Subscribed in case I need more in the future, haha.
So I did everything perfectly, but my minus sign as in collasped mode did not show once clicking the plus expand. Why is that? With exact code of your.
Wix was able to tell me to hide and unhide the collapsible strips in the mobile editor and that worked for 3 of the five collapsible strips. However, they do not support coded items so I am stuck. I could really use some help with the other two. Any ideas?
Pffffff.... I got it to work, but as someone who does not really know coding, this is really unnecessarily hard. Thanks for the effort to explain this though.
For anyone still looking for a response, I noticed that if you switch to the mobile mode and look down in the coding panel, the collapsible strips were no longer collapsed by default. Once I checked the "Collapsed" box for this for each collapsible strip, the button text (Step 1 in the example) then works to expand/collapse. The plus and minus got moved outside the button. I think you could resize the button to cover the area of the plus/minus, but I just scrapped those two graphics altogether and used text only. Also, I had to do some readjusting to move all the strips together in the mobile version, as they got some spacing between them. Hope this helps.
after using expand() the whole strip is scrolled down till the end which means it it exceeds screen size specially in mobile - user needs to scroll up to see beginning of the expanded strip. I used scrollto() to scroll up again but it creates weird animation down and up. any solution?
Thank you for sharing, this seems to be the easiest way to do this, but I want to do this 5 times on 50 different pages, and it seems like it would take me a long time, and it blows my mind accordion drop down menu's are not just a part of the site design!
What can be the possible reasons why it doesn't work? Have been trying it for hours, doing exactly everything as told in the video. Doesn't work upon pre view.
Awesome tutorial and worked great for me. Quick Question. In mobile (actual device not preview) all the boxes start expanded. Is there a setting or fix for this? Thanks in advance. Edit: I fixed it, you simply go into the mobile edit mode, select the strip, then under default values in dev mode select collapsed. I also had to go in and change the size of the buttons to match the box in mobile mode.
You guys do a fantastic job explaining everything and have a great pace to the tutorial. I hope you keep up the hard word! As a side note, I want to create this type of function to my menu. Is there a better way of creating the collapsible content in a vertical menu environment? Wix should have a built in expandable vertical menu option by now 😓
For anyone wanting to follow this, I got a little lost, so I asked Chat GPT to do it for me instead. It ended up being a straight copy paste. (You still have to name the elements, and set the hidden / collapsed flags, but all the hard stuff the AI can do)
This was really wonderful - yet for some reason, nothing happens when I press the plus! I am copying exactly. Does anybody know what the problem could be?
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Thanks for a fab tutorial, all is working well, EXCEPT for the blank space afterwards... I can't seem to get that to shrink back up to the buttons when they're shrunk. Any ideas how to fix as the double-clicking you mentioned didn't work at all
I seem to have followed this and got all the code right so there are no errors, but just not working? Any tips/comments on what I need to do apart from check the code line by line? which I have done.
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Thank you for all the work you put into creating these videos. I have watched a number of them and they are easy to follow. I have even managed to implement a couple of different dynamic functions/features to the new website that I am creating using your guidance. That said, I have a quick question. The different things I have utilized (this collapsible section being one of them) works as expected when viewing on a computer, but when I go to look at it in mobile view, it is a total disaster. It does not appear to be usable even with minor replacement of things as one needs to do for mobile viewing. Is this expected? Are these things not meant to be responsive and so I would need to develop something completely different for mobile view or should it be relatively transferrable?
Thank you so much for this easy and digestible tutorial. Was a life-saver. Will this also apply to the mobile version of the site? My content fits fine on the desktop version but gets extremely long on the mobile. I am trying to shorten it by creating collapsable items in mobile view. Thanks in advance!
This is cool, I just tired it out and I’m feeling good right now but then the mobile view is not working well, all looks messed up, can you do a new video on how to fix that, thank you so much
Nice tut. But one quick question, why not use layers tool when renaming elements on the page (would be faster and less actions required). Have a nice day.
Everything worked perfectly, thank you for the amazing tutorial! The only issue I have is the blank space left behind. I adjusted the page height like in the video but the space still remains. Any suggestions?
Thank you for the video. It's highly appreciated. However, I have a question around the default state of the collapsible when anyone loads the page. I observed that the content is open and visible by default which defects the sole purpose of this feature. Is there are way to make it close by default whenever one lands or refreshes the page ?
I tried to do it using a repeater. It works, but when I click one of the items, all of them opens. is there away to make work for every item by it self?
Hi I have added this to my site - it works fantastically well, thank you! But I have some long expanded containers and was wanting to add another close button at the bottom of the container so that you don't have to scroll to the top to close it - I don't know the code to achieve this.. any help please
Thanks for sharing as always. In regards to the "Adjust page" option, is this available on Editor x? (It seems the same problem happens over there also on bottom of page)
Thank you for the tutorial! Works for me, the only thing is that I can't get rid of that white space below. I can't use the same method as you because I have other strips on the page below those boxes. So that leaves a huge gap right in the middle of my page. Is there another way to get rid of that empty space?
Do you have a different tutorial of how to make this function when in mobile setting? I had it all working fantastically when on the desktop version but when I go to mobile . . . whomp whomp, the hidden sections aren't hidden at first and everything is out of place. Thanks!
This is awesome. Thank you. Do you have the code you put into the editor in written format so I can copy and paste it and just adjust my button name and box name? It would make it so much easier than going back to your youtube page and trying to copy it back and forth.
Hey man, thanks for this tutorial. I was wondering if there's a way to make it only limited to one collapsed section open at all times. For example, If open section is open, and i click on a different button to open a new section, the first section automatically closes, and the new one opens. Im thinking adding a boolean to check whether any other section is open, and when clicking another button you close that section. Not really sure, im new to coding. Thanks
Hi thanks for the awesome tutorial but i have a few question. 1. When i go to the preview and clicked, it prompted an error saying 'togglebox not defined.' 2. Does this code works on mobile? Thank you in advance!
Thank you for the content. This is what I have been looking for. Just one question: I can not use header on this? because if I use header from template, the code does not work somehow.
Thank you but as a complete novice which I am. You lost me when you typed into the naming panel, you didn't say how you got from one section to the other i.e. step 1 to minus, is there something to save?
it doesn't work for me. instead of plus and minus signs, i used up and down arrows. i wonder if that's the problem. also, i'm wondering how the codes figured out which one is the plus and minus signs when you input it. should i have to change the labels of my arrows too?
I've could achived some of the itens taughts, however I had issues on copying strips and my editor stood blank in the spots between the subtitles after all. I apreciate in advance any one can help me.
After I 'hide' the minus sign, it disappears and I'm unable to locate it / move it back over the plus sign. Any ideas on how to view the minus sign after we've 'hidden' it?
how can I fix the problem with the unwanted space if this is not the only element on the page? Because my FAQs are in the middle of a big page and I struggel with all kind of problems reagrding that space, for example the editor magicially shrinks stripes together around the FAQ, etc.
Thank you so much for the excellent instruction on how to build the collapsible sections. I've integrated this into a couple different areas on my website, and everything on my end is functional and working. However when I sent the "Get Feedback" link to some friends to check it out before I published the site, some of them could open the boxes with the +/- buttons and others could not. Any thoughts or ideas on what might be causing this? We personally have 4 different computers here at home and it works on 3 of them and 1 it doesn't. I don't want to release the website if people aren't able to open the boxes. Any troubleshooting guidance you have would be greatly appreciated. I'm a beginner and don't know how to write code, (except when I follow your step by step tutorial). :) Thanks!
You should be able to use the onClick function for the plus and minus icons. If not, then you can use a transparent button for them. But if you place the big button over the icons then it shouldn’t matter too much (depending on what you’re trying to build). Hope this helps!
@@kittyorourke754 I had that happen too. Double check the order of the items. Click on Layers (Under Tools) and make sure the order is Container box on bottom, then plus sign, then minus sign, then button on top. That solved my issues. Hope that helps.
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Nice tutorial. Does anyone know if it's possible add ids to the elements inside the collapsible section (answers)? Like let's say I have two links inside my Section, and I want to do code events when clicking on them, but they don't have ids to be selected. How can I do that?
Hey! This was super helpful! I'm curious if you know of a way to do this in Editor X as a horizontal element. I wanted to have horizontally expanding "tabs" on a client site and that one I can't seem to figure out. Would greatly appreciate any advice!
So I do have one question. When I try clicking on the plus/minus button. Nothing happens. But if you click the box next to the two signs, it works. Is there a way that you could help make those two signs clickable? I just know that some people coming to my site might not understand and get frustrated in seeing the box not open as how it should.
Hi! Literally had the same issue but my first three were working. I resolved this by replacing the defective strip and named the elements in the Collapsed Button EXACTLY how Wix Fix did it at 6:27- 7:13 (basically naming the + and - elements first before naming the button) and everything's working now. Hope this helps
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Code did not work... Is it because things like "plusSign" , "minusSign" and "boxElement" need to be defined i.e. also associated with certain elements on the page?
Yes you need to change all the "plusSign" and "minusSign" IDs to match the page, or change the code to match the IDs already on it. If you see any bits of code underlined with red, that means the code does not recognize any elements with that name.
@@wixfix I think I have fixed it! Thank you! Now I have a different problem however... The box works when I click on "Step 1" text or when I click right below the plus sign. But! As soon I hover on the plus sign symbol, the hand symbol disappears, so I cannot click on the plus sign to work as a button... I used vector art plus sign from WIX gallery and instead of a minus sign I used a horizontal line. I selected as you showed in the video to bring the minus sign (the line) forward. Not sure what the problem can be... I would very much appreciate your help and advice!
There'a another RUclips channel called Code Queen that exclusively makes Velo tutorials. She would be a good place to start. However, if you do not know how to use Javascript, I suggest you learn that first because at Velo's core, it is just Javascript.
Great tutorial! Is there a way to incorporate this approach with a repeating group to build your own custom FAQ but pulling data from a Collection as opposed to having it within each individual box? The standard Wix FAQ app is not ideal, will hang, etc. Looking for a better solution for our business pages. Thank you again for all the great videos!
You can definitely connect all the content to a database. You can put whatever you want into the collapsable sections and have a repeater that connect to collections!
Thanks
Great explanation of how to set up the collapsible boxes! Another issue: I'm hoping to set up a menu above my collapsible boxes with anchor links to different subheaders above each of the boxes. However, the anchor links navigate to the place in the page where the subheaders would be if the box was open instead of collapsed/hidden. Does anybody have a solution? Double clicking on the page length tab at the bottom of the page doesn't seem to help. Thanks!
Thanks for the great video. The desktop version is super and works wonderfully. Unfortunately, the mobile version, like always with WIX, opens like so many scrambled eggs. Question: I was able to organize all of the items in the mobile version but when opening the page, the default view is the strips expanded with the click boxes all showing the plus sign. Any help here?
nice, thanks. now ho do i make this work on wix dynamic pages?
Is there any way to make the collapse and expand action have a smooth transition?
Great tutorial! I did everything as shown in the video but my + and - signs don’t work. The section expands when I click anywhere in the box but the + or - button (so for example on the text or just right next to / above / below the button). Anyone know how to solve this?
Great tutorial! Can't beleive it is this needlessly complicated though
seriously. I moved from Squarespace because of some key missing features, but this was one thing they made really simple. I was upset when i was using the collapsable text on wix. it is so boring.
Hi guy ! Nice video !
however I can't get your code to work on editor x
Is there a report? I still feel like I did everything as you say.
I created a section: id section123
in this section I created a container: id box205
In this container is
a button: stepOneCollapseButton
two images: StepOnePlusSign and stepOneMinusSign
I created just below a new section: id sectionstepone
Within this section is a stepOneCollapibleStrip container
Yes I know that there are already ready-made accordions ;) but we can't personalize and add images on the title part
I hope you will have 5 min to answer me... I'm really struggling ;)
Hey ! Thank you for this amazing tips !
It doesn't work on other browsers than Google Chrome, do you know how to fix this ?
Great... Question... is it possible to collapse and expand with a fade effect?
Was not able to accomplish the fade with this method, but you can accomplish the fade effect using the multi-state box method. Learn more here: www.wixfix.com/post/msb-collapsible-sections
In the Multi-State Boxes settings, you can set the transition between the states. Hope that helps!
@wix Fix
I am getting a parse error-unexpected token on the last line of my bracket. please help!
Seriously what a skill you have! I've never coded anything in my life and I needed to for this exact purpose on my business website. This tutorial is super easy and straight forward and looks INCREDIBLE on my site now. THANK YOU!! Subscribed in case
I need more in the future, haha.
So I did everything perfectly, but my minus sign as in collasped mode did not show once clicking the plus expand. Why is that? With exact code of your.
Wix was able to tell me to hide and unhide the collapsible strips in the mobile editor and that worked for 3 of the five collapsible strips. However, they do not support coded items so I am stuck. I could really use some help with the other two. Any ideas?
does anyone know if you can make a collapsable element inside an collapsible element?
Thanks bro, greetings from Colombia
I know nothing about coding. This is my first time to try and it WORKS! Very clear steps and explanation. Deeply appreciate your video!☺
Pffffff.... I got it to work, but as someone who does not really know coding, this is really unnecessarily hard. Thanks for the effort to explain this though.
Hi, thank you for this tutorial. It works like a charm on desktop but not on mobile. Can you please explain why?
Following this one. Not able to make it work on mobile. Help! :D
Following for response.
For anyone still looking for a response, I noticed that if you switch to the mobile mode and look down in the coding panel, the collapsible strips were no longer collapsed by default. Once I checked the "Collapsed" box for this for each collapsible strip, the button text (Step 1 in the example) then works to expand/collapse. The plus and minus got moved outside the button. I think you could resize the button to cover the area of the plus/minus, but I just scrapped those two graphics altogether and used text only. Also, I had to do some readjusting to move all the strips together in the mobile version, as they got some spacing between them. Hope this helps.
Following this topic. Need some help with mobile version.
after using expand() the whole strip is scrolled down till the end which means it it exceeds screen size specially in mobile - user needs to scroll up to see beginning of the expanded strip. I used scrollto() to scroll up again but it creates weird animation down and up. any solution?
This Tutorial is so underrated omg Thank you so much!
Thank you for sharing, this seems to be the easiest way to do this, but I want to do this 5 times on 50 different pages, and it seems like it would take me a long time, and it blows my mind accordion drop down menu's are not just a part of the site design!
Thank you!
Thank you so much!
What can be the possible reasons why it doesn't work? Have been trying it for hours, doing exactly everything as told in the video. Doesn't work upon pre view.
I agree, it's not working
Very helpful. Thanks!
thankyou this was so so helpful!!
Superb tutorial.
thank you so much this help me a lot and easy to understand
Really good and easy to follow tutorial. How do the changes get reflected on the mobile version please?
You are the BEST! Thank u so much for this video, really help me
Awesome tutorial and worked great for me. Quick Question. In mobile (actual device not preview) all the boxes start expanded. Is there a setting or fix for this? Thanks in advance.
Edit: I fixed it, you simply go into the mobile edit mode, select the strip, then under default values in dev mode select collapsed. I also had to go in and change the size of the buttons to match the box in mobile mode.
life saver!
THANK YOU!!! Worked like a charm! Is there a way to have them auto collapse when you open another one?
You guys do a fantastic job explaining everything and have a great pace to the tutorial. I hope you keep up the hard word! As a side note, I want to create this type of function to my menu. Is there a better way of creating the collapsible content in a vertical menu environment? Wix should have a built in expandable vertical menu option by now 😓
This worked! Big thanks.
Any way to opt for a transition when the box expands/collapses?
THANKS A LOT!!!!
For anyone wanting to follow this, I got a little lost, so I asked Chat GPT to do it for me instead. It ended up being a straight copy paste. (You still have to name the elements, and set the hidden / collapsed flags, but all the hard stuff the AI can do)
Bro AI is absolutely insane lol. It wasn't perfect when i did it but i know enough to get around it. Ai is getting to be real useful!
WOAH, i think i stand by the FAQ Bar from Wix. haha great Tutorial. Thx a lot, Greetz From Germany
Great tutorial! I love learning something new. You got a new subscriber after watching this video.
thanks!! been looking for this.. subscribed to you!
thx!
Amazing, easy to understand. Many thanks Wix Fix. You rock!
Hello! Thanks for the great video !!!!!!
Can you tell me how to automatically close an accordion when you open another one?
Thanks a lot!
This was really wonderful - yet for some reason, nothing happens when I press the plus! I am copying exactly. Does anybody know what the problem could be?
yeah... me too :(
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Such a great tutorial!!!! Thanks a lot. How can I make all the other strips collapse when another one is opened?
Dear Sir, Thanks for the useful class. It works well. However, when the web page is loaded, the section remains expanded. pls help.
Mister can you make video to explain how you make your section "'What We Offer You" on website stand and the other section move please?
Thanks for a fab tutorial, all is working well, EXCEPT for the blank space afterwards... I can't seem to get that to shrink back up to the buttons when they're shrunk. Any ideas how to fix as the double-clicking you mentioned didn't work at all
I seem to have followed this and got all the code right so there are no errors, but just not working? Any tips/comments on what I need to do apart from check the code line by line?
which I have done.
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Thank you for all the work you put into creating these videos. I have watched a number of them and they are easy to follow. I have even managed to implement a couple of different dynamic functions/features to the new website that I am creating using your guidance. That said, I have a quick question. The different things I have utilized (this collapsible section being one of them) works as expected when viewing on a computer, but when I go to look at it in mobile view, it is a total disaster. It does not appear to be usable even with minor replacement of things as one needs to do for mobile viewing. Is this expected? Are these things not meant to be responsive and so I would need to develop something completely different for mobile view or should it be relatively transferrable?
Hi Brenda, did you ever sort out your mobile version using collapsible items?
Yes thank you, with help from a developer@@jeffreyanhut6935
Thank you so much for this easy and digestible tutorial. Was a life-saver. Will this also apply to the mobile version of the site? My content fits fine on the desktop version but gets extremely long on the mobile. I am trying to shorten it by creating collapsable items in mobile view. Thanks in advance!
This is cool, I just tired it out and I’m feeling good right now but then the mobile view is not working well, all looks messed up, can you do a new video on how to fix that, thank you so much
Nice tut. But one quick question, why not use layers tool when renaming elements on the page (would be faster and less actions required). Have a nice day.
Everything worked perfectly, thank you for the amazing tutorial! The only issue I have is the blank space left behind. I adjusted the page height like in the video but the space still remains. Any suggestions?
Same thing happened to me, but only on the mobile version... would love to get some help on that!
@@adamdevito7367 It is because one of your previous strip is overlapping.
Is there any way to add a transition effect when the boxes are expanding or collapsing?
Thank you for the video. It's highly appreciated. However, I have a question around the default state of the collapsible when anyone loads the page. I observed that the content is open and visible by default which defects the sole purpose of this feature. Is there are way to make it close by default whenever one lands or refreshes the page ?
I tried to do it using a repeater. It works, but when I click one of the items, all of them opens. is there away to make work for every item by it self?
wowowowow thank you!!! Quick question: does this work when people are viewing from mobile?
Hi I have added this to my site - it works fantastically well, thank you! But I have some long expanded containers and was wanting to add another close button at the bottom of the container so that you don't have to scroll to the top to close it - I don't know the code to achieve this.. any help please
oh I was looking for this method in Wix. Finally! it was there. never knew until I find this video in youtube. Thanks so much!
Thanks for sharing as always. In regards to the "Adjust page" option, is this available on Editor x? (It seems the same problem happens over there also on bottom of page)
What a hack for something that should be there by default. Nice tut though!
Thank you for the tutorial! Works for me, the only thing is that I can't get rid of that white space below. I can't use the same method as you because I have other strips on the page below those boxes. So that leaves a huge gap right in the middle of my page. Is there another way to get rid of that empty space?
Same for me!!
I had the same issue, what fixed it for me was going into zoom out and reorder mode and then selecting 'delete blank space', problem solved!
works great! but clicking adjust page height doesn't remove the white space, still have a bunch of white space to scroll and unsure how to fix.
Do you have a different tutorial of how to make this function when in mobile setting? I had it all working fantastically when on the desktop version but when I go to mobile . . . whomp whomp, the hidden sections aren't hidden at first and everything is out of place. Thanks!
Guys, i realised this does not work on Mobile version?
Yes, i dont really understand how to optimize for mobile versions too
This is awesome. Thank you. Do you have the code you put into the editor in written format so I can copy and paste it and just adjust my button name and box name? It would make it so much easier than going back to your youtube page and trying to copy it back and forth.
Hey man, thanks for this tutorial. I was wondering if there's a way to make it only limited to one collapsed section open at all times. For example, If open section is open, and i click on a different button to open a new section, the first section automatically closes, and the new one opens. Im thinking adding a boolean to check whether any other section is open, and when clicking another button you close that section. Not really sure, im new to coding.
Thanks
Hi,
I followed this step by step and it did not work. The collapsible strip will not expand when clicked. There are no error messages.
Make sure the button is in front of the other elements and the button is coded correctly.
Did you get it working because I can't?
Hi thanks for the awesome tutorial but i have a few question.
1. When i go to the preview and clicked, it prompted an error saying 'togglebox not defined.'
2. Does this code works on mobile?
Thank you in advance!
Good tutorial,. Have you any code that will show a corresponding hidden textbox when an item in a Multi Checkbox is selected.
Great video - thanks. Does this work on multi language sites as well when you need to translate?
Thank you for the content. This is what I have been looking for. Just one question: I can not use header on this? because if I use header from template, the code does not work somehow.
this was my first time attempting to use any coding on Wix and I managed to succesfully implement this technique. Thank you for the helpful tutorial
Thank you but as a complete novice which I am. You lost me when you typed into the naming panel, you didn't say how you got from one section to the other i.e. step 1 to minus, is there something to save?
Didn't work. I followed all the steps but the onReady remains red and underlined the whole time for me so none of the code beneath it works.
I agree, it doesn't work unless you managed to find the fix?
it doesn't work for me. instead of plus and minus signs, i used up and down arrows. i wonder if that's the problem. also, i'm wondering how the codes figured out which one is the plus and minus signs when you input it. should i have to change the labels of my arrows too?
I've could achived some of the itens taughts, however I had issues on copying strips and my editor stood blank in the spots between the subtitles after all. I apreciate in advance any one can help me.
After I 'hide' the minus sign, it disappears and I'm unable to locate it / move it back over the plus sign. Any ideas on how to view the minus sign after we've 'hidden' it?
how can I fix the problem with the unwanted space if this is not the only element on the page? Because my FAQs are in the middle of a big page and I struggel with all kind of problems reagrding that space, for example the editor magicially shrinks stripes together around the FAQ, etc.
Looks promising! Is it possible to apply this to Editor X? Is it possible to replace strips by containers? As EditorX does not have strips
You can but using Multi-State Boxes is easier and more reliable. We have videos on that so feel free to check them out!
Thank you so much for the excellent instruction on how to build the collapsible sections. I've integrated this into a couple different areas on my website, and everything on my end is functional and working. However when I sent the "Get Feedback" link to some friends to check it out before I published the site, some of them could open the boxes with the +/- buttons and others could not. Any thoughts or ideas on what might be causing this? We personally have 4 different computers here at home and it works on 3 of them and 1 it doesn't. I don't want to release the website if people aren't able to open the boxes. Any troubleshooting guidance you have would be greatly appreciated. I'm a beginner and don't know how to write code, (except when I follow your step by step tutorial). :) Thanks!
Different browsers? Desktop vs. Mobile?
Great tutorial. Question: is it possible to make the plus and minus buttons also clickable?
You should be able to use the onClick function for the plus and minus icons. If not, then you can use a transparent button for them. But if you place the big button over the icons then it shouldn’t matter too much (depending on what you’re trying to build). Hope this helps!
@@wixfix I have the exact same issue. Everything in the button is clickable *except* the plus and minus signs
@@kittyorourke754 I had that happen too. Double check the order of the items. Click on Layers (Under Tools) and make sure the order is Container box on bottom, then plus sign, then minus sign, then button on top. That solved my issues. Hope that helps.
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Nice tutorial. Does anyone know if it's possible add ids to the elements inside the collapsible section (answers)? Like let's say I have two links inside my Section, and I want to do code events when clicking on them, but they don't have ids to be selected. How can I do that?
When i preview the page the boxes are open, it works but they are already displayed can someone tell me where im wrong and how i can fix it?
Hey! This was super helpful! I'm curious if you know of a way to do this in Editor X as a horizontal element. I wanted to have horizontally expanding "tabs" on a client site and that one I can't seem to figure out. Would greatly appreciate any advice!
Does this code also work on the mobile site? My drop downs do not disappear on my mobile site for some reason
same
Hi, i get this error "plusSign is not defined"
So I do have one question. When I try clicking on the plus/minus button. Nothing happens. But if you click the box next to the two signs, it works.
Is there a way that you could help make those two signs clickable? I just know that some people coming to my site might not understand and get frustrated in seeing the box not open as how it should.
Hi! Literally had the same issue but my first three were working. I resolved this by replacing the defective strip and named the elements in the Collapsed Button EXACTLY how Wix Fix did it at 6:27- 7:13 (basically naming the + and - elements first before naming the button) and everything's working now. Hope this helps
This happened to me also. What you need to do is rearrange the Minus, Plus and the Button so that the Button is on the very top. Otherwise you're clicking the minus, and nothing is happening because the function is on the button, not the minus and plus buttons. I'm unsure why in this tutorial he says to make the minus sign on top, it should be arranged so button is on top :)
Code did not work... Is it because things like "plusSign" , "minusSign" and "boxElement" need to be defined i.e. also associated with certain elements on the page?
Yes you need to change all the "plusSign" and "minusSign" IDs to match the page, or change the code to match the IDs already on it. If you see any bits of code underlined with red, that means the code does not recognize any elements with that name.
@@wixfix I think I have fixed it! Thank you! Now I have a different problem however... The box works when I click on "Step 1" text or when I click right below the plus sign. But! As soon I hover on the plus sign symbol, the hand symbol disappears, so I cannot click on the plus sign to work as a button... I used vector art plus sign from WIX gallery and instead of a minus sign I used a horizontal line. I selected as you showed in the video to bring the minus sign (the line) forward. Not sure what the problem can be... I would very much appreciate your help and advice!
Where do you recommend I learn Velo coding?
There'a another RUclips channel called Code Queen that exclusively makes Velo tutorials. She would be a good place to start. However, if you do not know how to use Javascript, I suggest you learn that first because at Velo's core, it is just Javascript.
Can this work with editor x?
Yes it can!
@@wixfix Great, thanks!
I still have tons of blank space even after using the trick mentioned. This seems to be an issue with other commenters too. Please help :)
I just fixed it! My button strips were in different sections. Once I merged them into one section, it was all fixed. :)
👍
Great tutorial! Is there a way to incorporate this approach with a repeating group to build your own custom FAQ but pulling data from a Collection as opposed to having it within each individual box? The standard Wix FAQ app is not ideal, will hang, etc. Looking for a better solution for our business pages. Thank you again for all the great videos!
You can definitely connect all the content to a database. You can put whatever you want into the collapsable sections and have a repeater that connect to collections!