2 Ways to Develop FAQs - a Webflow Tutorial

-- SKILLSHARE --
If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free.
skl.sh/2PU9tML
- ABOUT -
FAQs are one of my favorite components to develop. In this tutorial, we take a look at two ways to develop them.
Bonus! I also cover how to control the color of an SVG using font color.
Sorry for my nasaly voice. Getting over a cold. I would've waited to do the video, but it takes me weeks to get over colds... Also, I think I accidentally changed the gain on my mic at one point and some of the audio was a bit scratchy. I'm not the best at production :)
- CHAPTERS -
Chapter 1 | Intro 01:24
Chapter 2 | Anatomy of a FAQ 02:23
Chapter 3 | Custom FAQ Build 03:44
Chapter 4 | Changing the color of an SVG with Font color 07:42
Chapter 5 | Building an FAW with the dropdown component 19:18
Chapter 6 | Comparing the two methods 31:05
- WEBFLOW -
Live Webflow Site:
jocando-tutorials.webflow.io/faq
Read-only link:
preview.webflow.com/preview/j...
All Tutorials:
jocando-tutorials.webflow.io/
- RESOURCES -
Font: Inter by Rasmus Andersson
rsms.me/inter/
- ABOUT ME -
Serve - My Creative Studio’s Site
www.madebyserve.com/
Dribbble
dribbble.com/Jose_Ocando
Twitter
/ jaocando
Instagram
/ jose.a.ocando

[@kilian8201]

Never apologize for trying to make money off your channel,never. However,great work.Keep it up.Much appreciated

[@poncardas]

Beautiful tutorial! Love the execution and it's simplicity! Thanks Jose.

[@benfield1866]

Thanks for all the webflow work you do! It's so helpful to have high quality webflow tutorials, there aren't many around!

[@Bonakaren]

As always, amazing! Jose, you make the best tutorials ever!

[@SigmaLance3375]

You are amazing at teaching, when I watch your vids I make sure to never skip the ad. Thank you for your work.

[@linksandmaria]

Loved this, thank you so much for sharing! Great tutorial (and voice!) Cheers!

[@wearestudiotonic]

Thanks a lot man - just used the SVG code from Figma to Webflow and it saved me. Had no idea it existed. Love your videos.

[@Ludvio]

thats dope.love all the neat optimisation tricks you explain

[@Installator1]

You saved my day with this tutorial! Thank you Jose 🙏🏼

[@Leo-rd5bb]

Your videos are awesome man, thanks for taking the time to make them 🙏

[@JoseOcandoVideos]

Appreciate it Leonardo;

[@werewolf5]

Great Video!!! Bravo, you earned yourself a fan.

[@mourtac]

Your timing is great! I just finishes building an FAQ on my own, that matches your first example pretty much... but that came with the cons you mentioned (left-open-state etc.). So, I'm gonna rework the whole thing tomorrow by following your second method... Thanks so much for sharing!

[@JoseOcandoVideos]

Awesome! I love that this helped you out immediately.

[@olehansen6568]

As always top notch tutorials. I have already used lots of your tricks

[@JoseOcandoVideos]

Thanks Ole!

[@Pichaya333]

Thank you so much for this tutorial!!

[@Ludvio]

to open only one faq item at a time you have to have in your interactions animations: pane class only affect siblings and the trigger class only affect children

[@mgonda]

Great walkthrough.

[@tuskanyagency9282]

A great tutorial - saved the day thank you

[@hamishmaclean1629]

Great work!I recently learnt about the Select tag. Webflow needs to enable developer customisation options quick smart - add own tags, add own properties, bind attributes to CMS items.. end rant! Thank again

[@ClaraLouiseMartin]

Thanks for the tutorial, it was really helpful!

[@jenniferward6821]

Happy to do the cup of coffee thing Thank you

[@rifkiedr]

I love your content

[@ashleyrose6106]

Thank you! I recently created a slider from your custom video, and now I found this one for the accordion! Is it ok to use the html code that you included in the read only link? Or would you prefer we generate our own svg code? I tried with Adobe XD and it didn't work for me :/ Cheers!

[@derartas]

hey ,maybe you could help im follwoing your tutorial but it seems like when im using a custom animation (like you do) for the dropdown interaction - the close other tabs function isnt working anymore :(

[@faruqbakre9532]

Thank you so much

[@klkhabo3272]

Congrats on the videos!

[@JoseOcandoVideos]

Thanks K!

[@okikioluwashokunbi4512]

PLEASE HOW DID HE GET THE 2ND PLUS LINE I HAVE TRIED ITS DRIVING ME CRAZY PLEASE SOMEONE HELP

[@Starjohnathan]

thenx

[@viddakraft]

Thank you for this video. I build the website for my company, you saved me a lot of time. I have also a question, how to change sequence of my questions in the CMS?

[@GocePetrov]

Hi there, First of all, thank you for this video, sure helpful. I am making the build on the second faq, now I like to ad individual Calendly embedded dose for all the headings. So when you click to open the dropdown you will see the Calendly booking page. I able to put a code instead of the answer and it works perfectly. The only problem I need the code to be defferent for every section. As when I put it lie this it automatic fill all the headings with the same code. Any idea of how to achieve this but with individual embed for each heading?

[@techbyusman]

Hi, thanks for the tutorial Can you guide me about this problem? When I click on the First Faq Question, It automatically opens all the other FAQ. I don't want this. I want Only One FAQ open at a time. Is there a solution?

[@digitalvarshabairagi]

i'm not using collection list (content for answer). i have used 2nd way but there is the question is not responsive in mobile device. In mobile device scroll is shown.

[@kamranimtiaz2215]

Please, sir Upload videos more frequently. BTW your new profile picture is really good.

[@JoseOcandoVideos]

Trying! If the monetization helps, I'm hoping to do them more frequently :)

[@ziaulmustafadanish1286]

problem is responsiveness when question text is increased

[@sudeshdas1755]

hi nice tutorial. one doubt how to collapse other when you open one.

[@analysemarches576]

awesome

[@andrewjudson2750]

The answer text is not responsive in your linked project (if you open an answer and then change screen width). How do you make it responsive?

[@joranblock7665]

do you have a solution for it?

[@caseypalmer5874]

This is great. Love how you have different options. Sadly, webflow has changed and we can't follow all the instructions anymore. For example, I'd love to know how to use current interaction capabilities to only have one faq content open at a time. Any tips?

[@kadesull]

It still works. Make sure you have the "dropdown" element selected and are using the "dropdown opens" element trigger and not the "on click" element trigger.

[@analysemarches576]

i think this one is really long too. though you don't have to justify for monetisation by the length. Just go for it, i really appreciate your work and if you can earn more bucks by monetisation i would be happy to help you. I know it take a lot of work ;) bless you

[@crarls27]

Just a heads up, I would not recommend using the second method (using native webflow dropdowns) because if you have long questions the question text will not wrap onto a new line. This gets especially problematic on smaller screens.

[@matildakurtsonbellman7296]

Wow hey! I built an FAQ thinking I had such a flow using an easier version om method 2, but then I had this exact problem with responsivness, would you say if I used the first method it wouldnt emerge? Or do you have any other tips? 🙏

[@joranblock7665]

@@matildakurtsonbellman7296 is there a solution about this topic now?

[@joranblock7665]

is there a solution about this topic now?

[@MarutiWebStudio]

I know it's too late...but this is what I did. I set the typography Breaking to Normal explicitly and that seemed to resolve the issue.

[@CryptoNationReal]

way too fast man

[@Mert-pd2ht]

the amount of times, you doing mistakes is such time waste.

[@Installator1]

are you for real????

[@Mert-pd2ht]

@@Installator1 cry us a river

[@user-ke7pr7fs5h]

It's super helpful, Thank you! Absolutely brilliant llifehackwith the embedded SVG code. I always suffered with a backbackground-image-and-opacity approach for changing icon color.