Custom FAQ on Wix by creating a double collapsing effect using Corvid
HTML-код
- Опубликовано: 5 сен 2024
- The collapsing design is a great way to list different attorney cases, medical information on a physician's site, education notes, agenda's or plans. By creating your own custom FAQ on Wix you can control the design and get really creative by adding custom images, custom arrows and custom text to display your information on website and make it really unique.
Link to Tutorial site: codequeen.wixs...
Link to Code: www.totallycod...
-------
Link to Facebook Group: groups/wixcode
Facebook Page: / codequeen
Website: www.totallycodable.com
Contact Code Queen: www.codequeen.co
Codes: www.totallycodable.com/tutorials
Wow! Thanks so much for that video! But especially the extra information about not setting up the height of the page manually ;-) with that hint (and some more research on google) I was able to get rid of the BIG gap below the collapsed text. Here is what worked for me AFTER I adjusted the page height manually:
1. Ctrl X to cut the strip. 2. Adjust the page height as if the strip is collapsed. 3. Ctrl V to paste the strip back 4. Repeat these steps for other strips.
Hi Nayeli, I can't thank you enough for your wonderful tutorials. You explain things in a way that's so easy to follow. I had a little issue with some of my sub topics not collapsing but have sorted it now. You truly are an asset to the WIX community. Thank you once again!
Thank you very much for the kind words. If you would like to leave a review on my FB page for others to read, you can use this link: facebook.com/codequeen
Nayeli.... you truly are the CODE QUEEN!!!! I am a great designer and NOT a coder by any means and after 3 hours of trying to get this to work on my own, I finally gave in and decided to see what CODE QUEEN might have available for this....and POOF! You've literally helped me with about 85% of the more advanced code features for my events listings website and I felt the need to come here and say THANK YOU SO MUCH!! (the least I can do..) I am building a site that was going to cost around $80-100k, and I'm almost done, ALL on my own, and it's so much thanks to your amazing, detailed, and passionate work and knowledge. I am very grateful and appreciative for your constant contributions across the online world and even your existence! I will be donating very soon my friend. Thanks again.
Brilliant, I am unexperienced in anything like this but thanks to you, it is all done!! Brilliant video, keep up the good work
Thank you so much for the kind words! I am glad you were able to accomplish your goals on your website.
Thank you I really like How you took the time to explain every step throughoutly. Also you have a very soothing voice!
Nice tutorial. Easy to follow the concepts and expand from there. Nicely done!
Ok, my first code ever. Did like 15 mistakes in one small code, but now everything works. thx was super helpful :)
Thanks for watching! I am so glad you were able to create your first code with this tutorial. That makes me very happy : )
Just want to say: you opened the door to code for me almost 4 years ago and without you I wouldn't have come as far as I have. Thank you Nayeli!
thank you, this was super helpful! and your voice sounds amazing, I would learn code i wont even need to keep listening to you
Can you please do another video explaining how to do this on the new version of Wix? Trying to do this on the updated version is really confusing for me.
Do you know code it already? If yes, can you teach me? cause im struggling too :(((
Thanks..i tried this and worked very well..you explained it very simply and clearly
Thank you sooooooo much - I was going crazy trying to figure it out.
You are very welcome : )
Thank you for this! Worked like a charm.
Thank you so much for this tutorial. I've been searching for this since yesterday! Now I'm a fan. Done subscribing!
Hi Nayeli, Thank you so much for this great video! I am VERY new at all of this, and I was nervous to even try. But after watching your video, I felt like I could do it!
This is awesome! Thank you so much for taking the time to put this together...so helpful!!
Thanks for watching!
Once again, YOU'RE AWESOME!
Excellent tutorial, thank you so much!
Hi Nayeli! This tutorial helped me out a lot! Thanks. I only have one problem I'm trying to fix, and it's in Mobile mode. Most everything is fine for collapsing my fields, but I can't seem to shore up the last bottom space. I've tried many times to "hug" the fields all the way to the bottom footer, but when they are collapsed it still leaves a large open space on my mobile page. Have you had that issue, and if so, possibly fixed it?
thank you, this tutorial was very helpfull :)
Thank you! that video actually helped a lot.
The code worked! Thank you Code Queen! Why can't we use both the verctor art and the text for the expand/colloape?
Also, is there a way to animate when expanding/collapsing?
Excellent Nayeli!
Thank you Daniel!
Great video! Very helpful info. Thank you.
Thank you!
Hi, thank you for the tutorial! I would like to know how to change an image when on click when expanding. For example change a plus image to minus image. Thank you.
I would like to know the same thing! Code Queen could you give us Tip
?
Hi Queen..., Nice tutorial (Great)..
i got it thankyou! God bless
great video - very helpful - thank you.
Do not adjust the height of your page manually. If you do this, it will create a large empty space that will not collapse.
Let the height of the page / area adjust automatically as you are adding elements to the page.
I recommend you build the page / sections using strips.
Double click sections to auto size up --- or use the arrows to drag up and remove the space you added manually.
What if you already did this? Can i fix the gap if I already adjusted manually?
Shift all the items towards the top of your page. Shrink your page size. Then start moving everything down again. Let the page resize on its own as you move items down again.
@@kyloinohio8521 Hi, I fixed the gap just double clicking on the "footer resizing button" that appears when you select the footer's body. Good luck!
@@codequeen More details on how to do that would be really helpful, I'm having a hard time getting rid of this giant gap 🙏
Wow that actually worked! Thank you @@julioclc!
Thank you!
THIS WAS SO HELPFUL! THANK YOU SO MUCH!
Thank you so much! Very helpful tutorial, very well done
Hi, so we used the code and everything works great. But we have elements under the container that we coded. So when we got to preview mode the elements underneath the coded portion are now alot farther down then when we see it in editor mode. Basically there is a huge blank space now between the collapsed paragraphs and the next element. We have a line and a picture under it so we are unsure how to fix this issue. Do you now how we can resolve this?
Wonderful ! Thank you a lot !
thank you Nayeli! It helped a lot!
Hi,
I am looking for help with a show more button, I would like the button to show all the text but have only a small paragraph showing on my website,Thank you X
before i continue watching this tuts, i wanna say that you really have a very beautiful voice.. its so lovely.. well anyway, im gonna continue watching.. =)
Hello. Great video! Do you have an updated version of this? I cannot repeat the instructions because my version of Wix is different. I can't find the collapse function.
thank you!
Love your work to help us create amazing Wix actions, it's easy to follow... I actually came across your video looking for an effect called from wordpress it is similar to collapsing effect but for horizontal gallery. No one is showing this in RUclips, is it possible to figure it out. I know you are capable of doing it ☺️
hi miss code queen, i enjoyed watching your video, it help me a lot especially in making my website for my students.... I have a question if you have a topic regarding an automated quiz and results?
hi i got a problem, there's a lot of spaces at the bottom of my page on mobile mode.. but in desktop mode it seems fine and normal.. i don't know to describe
Great video tutorial Code Queen. Quick question if I may... could this work with other elements other than just text? Lets say, collapse photo slideshows and/or other elements in a container box?
Hi, once coding is saved in previous mode display both text and with one click hide the text. I would like to have it different: like head text visible and description text hidded. Only with click to be open. How can I do? Thinks
Now that you have learned how to write the code, you can design it however you like. Which means you can keep the title and description separately so it doesn't ALL hide together.
Hi can you do a tutorial on how to code buttons that will link to another page? Done subscribing.
Hi, I've used this code to make 5 collapsing boxes from buttons in an above strip. There's no gaps when I go in the preview but when I add anchors to the collapsed elements then there's always a gap between the strips when collapsed, why is this? And how can I fix this? Also, How do you code to close one collapsed element when the others are opened?
How did you anchor your footer to the box so it moves on the page as you expand and collapse? I have a huge gap between my box and footer. Thank you!! This tutorial was exactly what I was looking for and so helpful.
Thanks for watching :)
When adding elements to the page DO NOT resize your page manually. Allow the page to resize by itself. To add an extra cushion after all of your elements, you can add a transparent Strip and resize accordingly.
@@codequeen very helpful, i tried your code and was able to make it work first time, but i am also having same problem of major gap between the footer and collapsed element, I didnt use a continer box and only coded the individual elements and between the last element and the footer there is a huge gap. Can you help me fix it?
@@dhruvrehan there shouldn't have any gaps between footer and last container
@@dhruvrehan Im having the same problem, have you managed to solve it?
Hi Nayeli... Very god tutorial - i totally understand. And also made i work in the PC/MAC browser:) But... question: Does it also work in mobile version? When i go to mobile editor, i can't really figure out how to make that work also?
Hi, i am trying to find the code in the link in your description, but i cannot find the code when i go into the site. can you give me the code pls? thanks
Thanks for the code; How to get rid of gap space between container and footer?
I struggled with the same issue. I tried several tests. Finally, I fixed the problem, so I share it here. If you click the footage, in the toolbar, there is the "freeze position". You should click this disable.
One more tips. I changed there is no gaps between footer and last container. All the way up to last container
I'm trying to get a back to top button to work and I have been trying for the last few days and it is just working I did the design 1st, not the coding.
Love the tutorial code queen just cant figure out how to make it collapsible with the same button
Mine is working but for some reason, there is weird space between the container box and the footer when I preview my site and make it live. Do you know any idea to fix that or did I do something wrong?
We have the same problem T_T please help us get rid of gap space between container and footer
Not sure if my comment posted but is it possible to have the drop down show, say multiple text boxes? how would the if statement look then?
Hi, I was wondering if there is a way to create different Multi-State Boxes for each of my products pages.
Each page will need to have different boxes different ingredients etc. I created a new box, but it shows up
on all my product pages same box. Thanks for your time.
So it seems like, to make collapse work as intended, objects must have been bumped into each other and the pulled slightly away again.
You can't expand the page by pulling down the footer, or the page will have large gaps. And it even seems like anchors some times mess with the distance between objects as well.
Have I missed any thing?
How to apply that if you want to collapse or expand an element on database if data field is empty?
hi, i love your video my my WIX editor look different and I don't have "developer tools" in the TOOL section, there is Dev mode that looks more complicated...please help...
Thanks a lot Nayeli! :-)
Alessandro Iorio Thank you for watching :)
This video has been a great help and i have been able to build an expanding element on the page. On the off chance you may see this (years after the video was done) i have one issue i cannot resolve. When viewing the page, when clicking on the element which then displays a box with info in it, the page expands, but it does not scroll down. So the expanded part is half off the page and i still only see the top half of the page. How do i get the page to scroll with the element that has now been shown?
Thanks for watching (years after video was done).
To auto scroll you would have to modify the code and add a scrollTo line after your expand line. See Wix sample docs: www.wix.com/velo/reference/$w/postpage/scrollto
Any tips and pointers on making an animated one? I've done it from scratch before but I'm not sure on how to do it on Wix
Fantastic, thank you so much!!! I was wondering - I have a very long box that expands. Instead of having the user scroll back to the top of the box to collapse it, I want to have a different 'Close' button at the bottom of the inside of the box to make the box collapse again. I've fiddled with the code a few times but can't seem to get it to work. Any help would be so appreciated!
it help me a lot! thanks
Youre using too many ads in your videos which makes the experience quite frustrating. Please keep them at the end or the start. Thank you :) Great video!
Sorry, we do not control the ads. The more the videos are watched, the more RUclips ads them to the videos where ever they want. But thanks for watching.
Hi there! I used this code for my checkbox filters on my page and it works super well on my desktop version.
However, it doesn’t work on my mobile version unfortunately. Is there a way to go about it?
It's me again lol ! You give me lots of ideas! I cannot find a video to show me how to use the NEXT feature in wix. I created a popup lightbox, so my visitors can add their information (promoters) to my website. I want each collection to be able to create the next page or next item. Do you have a tutorial like that? :o I have my site already set up now I need that feature. Thank you so much!
MY FORMS FINALLY WORKED, GO FIGURE! IT COULD HAVE BEEN THE OPERATOR LOL :)
Hi, I need assistance if you can help me. I want to create a page with over 500+ images and text in repeaters but I only want to display about 4 repeaters with 3 images each and have a button to "Load More" at the bottom of my page to load another 4 repeaters and so forth. I have googled and checked youtube but cannot seem to find anything.
Do you know how to do this?
If you can help me with this then you will be my hero :)
P.S. Its a normal wix website and not eCommerce store.
I tried this step by step and its still not working for me, I am not sure what I am doing wrong. I get this error when I try to preview my changes "Wix code SDK error: The src parameter of item at index 0 is required for items method."
Very well done, but very hard to hear you even with my volume all the way up. Super helpful, though, so thank you!
Yes, some people don't know that most of the videos withOUT my face in them ..... were recorded while my daughter was asleep ...... so hence ..... the low voice (to not wake her up). Because being a single mom ..... well sometimes that's the only spare time I have to record.
Thanks for watching and for the lovely words :)
very good!!
Freakin legend!
thank you so much!!
how do I make the triangles change where it is point when it is clicked, down and up? or this option is not available ? PLEASE HELP!!
Hello, thanks for watching.
If you want to make it look like the image 'turned', you would need to layer 2 images on top of each and hide and show at the appropriate time. These creates the effect that the triangle is 'moving' each time it is clicked. Remember to add the same click functions on both triangles or else your collapse and expand effect logic will not work.
Umm the code seems to be down! Great tutorial though, such a calm and soothing voice:)
Code is there ..... its a Wix Forum app ...you must login to view
The Wix Forum app where we placed the codes is not-reliable with redirects because it give false errors for pages that did exist. We have finished moving this code to the Wix Blog app instead. This is the new URL for the code: www.totallycodable.com/post/custom-faq-by-creating-double-collapse-effect We have to manually recreate each posting. Thank you for your patience as move over each of our articles, images and videos.
For those asking about the spacing at the bottom of the page on expansion and contraction, here is an explanation of the behavaior of element sizing and overall page size: support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size
Thanks so much for the tutorial! Is there a way to separate the 'Topic Titles' so when there are collapsed they aren't as close to one another? Mine look like they're on top of each other. If I separate the text boxes in editor, it only shows the space between when the text is expanded. Thank you!
Hi Nayeli! First of all i wan't to thank you for this great video, it's been really hard to find a video that explains this and in such great detail.
So after coding the collapsing effect with success i was wondering if when you have an expanded box and you click on the second one, the first one will collapse so there is always only one box expanded.
I hope this makes sense and that you can give me a hand.
Thanks a lot again for the video!!
Thank you for the kind words! Sorry for the late reply, I don't receive all RUclips notifications. What you would do is change your code so that on EACH collapse if-statement has ALL of your boxes. So for example after the line that says "$w('#oneSub1').expand();" .... you would insert a new line underneath that says something like "$w('#oneSub2').collapse();" and then another line after that "$w('#oneSub3').collapse();" and so on.
@@codequeen OMG THANK YOU! I was searching for this code for days!!! Now it finally works the way I wanted to! :D
Hi Nayeli, thank you so much for this detailed video. I'd like to ask whether this works with table as well if I insert a table connected to my database so it will automatically display the content? Thank you, Nayeli!
Need Help , when ever I set the boxepand to " Collapsed on load". I can not see my box content in preview.
Hi Nayeli, thank you for this amaising and simple code. I've tried it but when I published it the collapse and expand don't work on live site, but only in preview mode. Can you please help?
Why did you choose not to include the (event, $w) in your renamed functions?
Amazing video, thank you soo much! I finally made it work, the first time I did coding and even opened the Dev Mode, BUT I have a problem. I have a huge blank space underneath the expandable text section. I did all you mentioned, also moved each element up until it bumps into the element above, and than placed it where I want it. So I deleted the section again, cause I could not have left it like that. What could be the reason for this? Does anyone have an idea? Any advice is SUPER APPRECIATED! Congrats to this great video and a heartfelt thank you!
Hi Did you find a solution to this ? I am facing the same problem can you help if you have solved it please?
@@robertdaniel1981 I finally figured it out but probably more as a coincidence. My collapsible text is in 2 columns, so I added a box behind each column and made sure that the boxes end right where the strip ends. It was a lot of trial and error, but in my case, it had to do with the boxes I have behind the 2 columns.
@janina schick thanks :)
None of the Code pages work...
The Wix Forum app where we placed the codes is not-reliable with redirects because it give false errors for pages that did exist. We have finished moving our code to the Wix Blog app instead. This is the new URL for the code: www.totallycodable.com/post/custom-faq-by-creating-double-collapse-effect We have to manually recreate each posting. Thank you for your patience.
wtf woman tutorial on coding is so gooooooooooood
Hi, Thank you for the tutorial.
May I know I use dropdown selection, when select option1, topicbox1 expand, else collapsed.
how to do this coding for when select option1?
Hola, tengo problemas para optimizar esa aplicación para movil, podrías ayudarme?
So awesome :)
Thanks a lot for the video.
I have a small issue, screen size does not get adjusted automatically after the collapse and expand. Am I missing something while coding?
Hello Venkatesh!
What you would do is create the page on strips. Add your collapsed items onto 1 strip and do not adjust your page height manually. If you change it manually, it will not return to its collapsed size. Let the page automatically extend as you add more elements to your page. You can also add a transparent strip AFTER your collapse strip so that it adds some 'space' at the end of the page.
This was helpful, thanks!
How did you get her code? When I click the link she provided, I had to make an account and even then, there's no code anywhere. What am I missing?
The code is no longer available... We really want to add this feature to our site...
The Wix Forum app where we placed the codes is not-reliable with redirects because it give false errors for pages that did exist. We have finished moving our code to the Wix Blog app instead. This is the new URL for the code: www.totallycodable.com/post/custom-faq-by-creating-double-collapse-effect We have to manually recreate each posting. Thank you for your patience.
it such a helpful tutorial, my only concern is one. Will it affect our SEO score. how google alghoritm will read this. I hope someone can elaborate.
Content tabs and accordions can be okay as long as you consider what might be important for your users and the search engines to read. The information may not hold as much weight when it comes to SEO, but this doesn’t mean that Google cannot read, process or index it, only that it’s viewed as less important for organic rankings. So if it’s really important information, make sure your users can see it by default.
What Google says:
“Make your site’s important content visible by default. Google is able to crawl HTML content hidden inside navigational elements such as tabs or expanding sections, however we consider this content less accessible to users, and believe that you should make your most important information visible in the default page view.“
@@codequeen thank you so much for fast response. Really appreciate it.
Is that box will helpful for text overlapping??
Hello! I am trying to create a custom mega menu using this code however, the links up above are going to something different (a repeater code). Is the double collapsing effect code still available? Thanks!
This is strange ...... I have received other reports that other links are going to the wrong page ..... but when I check the live links ..... they are all correct.
Here is the link from above:
www.totallycodable.com/wix/corvid/create-custom-faq-with-double-collapse-effect
codequeen.wixsite.com/double-collapse
@@codequeen Thank you! I will go take a look. And thanks for creating these videos. They are a big help!
Hiya, wondered if anyone can help me. Am putting the code into the html box but it doesn't seem to be then doing it. Am I doing this correctly? Also there is no 'onclick' option on the tools bit.
Hello, thanks for watching. Codes are not added to HTML boxes. Please watch this Wix Code basics video playlist to get familiar with Wix Code: ruclips.net/video/LXceXjwcnUE/видео.html
I bumped the boxes to the titles, but I still get the space??
Thanks! :)
Hi Nayeli, would it be possible to make the side arrows spin to pointing down and vice versa when you expand and collapse content?
Did you ever figure out how to do this? I'm currently trying to make this happen
The first time I tried this it worked and I re did the page and now it won't work :(
Where can I find the code to copy? Your link to the code comes up with no blog post entry. Thanks!
Sorry, I don't get all YT notifications.
Here is the link to the code: www.velo.totallycodable.com/post/custom-faq-by-creating-double-collapse-effect
@@codequeen Thanks!!
this is amazing! The problem i have is that i have a HUGE list with more than 200 itens. Is it possible to add some rule that limmit the ammount of the list in the first click like the first 15, and then a button "see more" that go on showing 15 more each time you click?
Hello Coruja! Thanks for watching my videos! For such a long list I recommend using the Pagination element bar instead. This way you can set the repeater to show 15 items per page. When they click on the Page number on the pagination bar, they can see then next 15 items, etc. It involves zero code and all you have to do is connect it to your dataset! Here is more about pagination bars: support.wix.com/en/article/adding-and-setting-up-a-pagination-bar
@@codequeen wow i really didnt knew that existed. thank you so much!