Building a Basic FAQ Accordion in Webflow: A Step-by-Step Tutorial

Поділитися
Вставка
  • Опубліковано 4 гру 2024

КОМЕНТАРІ • 37

  • @Aliencancode
    @Aliencancode 2 місяці тому +1

    Bro is so underrated fr, Amazing tutorial
    Respect ++

  • @mr_draj
    @mr_draj 28 днів тому +1

    Awesome video, Thankyou for helping us.

  • @RashedKhanMenon-u4w
    @RashedKhanMenon-u4w 4 місяці тому +2

    Thank you, sir. you are awesome. Need more tutorials on webflow.

    • @dereksiuau
      @dereksiuau  4 місяці тому

      Thank you for watching sir! You can watch more Webflow tutorials on my channel and if you have something you want a tutorial on, lmk.

  • @robgogatz4291
    @robgogatz4291 4 місяці тому +2

    This was awesome! Thank you so much

  • @Marquant.
    @Marquant. 4 місяці тому +1

    this works and it's perfect, thank you .

    • @dereksiuau
      @dereksiuau  4 місяці тому

      You're welcome! Glad it worked perfectly.

  • @DevinsAlterAccount
    @DevinsAlterAccount Місяць тому +1

    Great Video, thanks!

  • @KaMicaZ77
    @KaMicaZ77 2 місяці тому +1

    Thanks ! It was understable ans easy to reproduce !

  • @jonasjakstas5305
    @jonasjakstas5305 2 місяці тому

    i saw few video about Foq, youe technique is the best

  • @davidgoult8694
    @davidgoult8694 5 місяців тому

    Simple and amazing, thank you!

    • @dereksiuau
      @dereksiuau  5 місяців тому

      Glad it was helpful David. Thanks for watching!

  • @gusnwanya
    @gusnwanya 5 місяців тому +1

    Derek this was the simplest accordion tutorial I've come across. Thank you sooooo much for this. That said when i try to publish this to a live site. I lose all interactions. :(

    • @dereksiuau
      @dereksiuau  5 місяців тому

      Glad it was helpful! And what? you definitely shouldn't lost any interaction when publishing. Are you exporting the code and hosting it on an external server?

    • @gusnwanya
      @gusnwanya 5 місяців тому

      Hi @@dereksiuau I managed to work out the problem. It was a simple invisible div that somehow caused the issue. That said I wanted to ask two more queries if you have a moment? 1. Is it possible to animate to create smooth transition? 2. How can you click on another accordion triggering an open instance to close? . No worries if this is too much for one reply. Regardless, i appreciate the tutorial very much!

  • @DiveSafariNZ
    @DiveSafariNZ 13 днів тому

    Thank you

  • @khizarahmed1625
    @khizarahmed1625 4 місяці тому +1

    thankyou so much for the tutorial derek it's been really helpful, but could you also do one animating the faq body to slide in and out smoothly instead of snapping back and forth?

    • @dereksiuau
      @dereksiuau  4 місяці тому

      Noted - but just FYI you can tweak the timing and and animation easing.

  • @seize2179
    @seize2179 14 днів тому

    Great tutorial! How did you instantly put the padding on all sides?

    • @dereksiuau
      @dereksiuau  10 днів тому +1

      You can use a shortcut hold shift while dragging anyside and it will auto put padding to all sides. Give it a try yo!

  • @charliehoch2362
    @charliehoch2362 4 місяці тому +1

    Amazing tutorial, thanks Derek! Is it also possible to let the Answer drop-down smoothly?

    • @dereksiuau
      @dereksiuau  4 місяці тому +1

      My pleasure. And of course you can, the tutorial is just to provide you with the premise and you and adjust however you want. If you want it to drop smoothly just add more transition time and perhaps a effect like Ease--Out

    • @charliehoch2362
      @charliehoch2362 4 місяці тому

      @@dereksiuau Awesome, thanks mate!

  • @zassdaniil
    @zassdaniil Місяць тому

    благодарю!

  • @Michael_08_
    @Michael_08_ 4 місяці тому

    It was a big help! Thank you, sometimes a little bit to fast but it still a good tutorial

    • @dereksiuau
      @dereksiuau  4 місяці тому

      Thanks for the feedback Michael. For clarity did you mean I talk too fast or I go too fast and should slow the tutorial and the steps down?
      Thanks.

    • @Michael_08_
      @Michael_08_ 4 місяці тому +1

      @@dereksiuau It would be nice if you slow the tutorial a Little bit down but Not to much :)

    • @dereksiuau
      @dereksiuau  4 місяці тому

      noted - thanks Michael.

  • @zpotek
    @zpotek 4 місяці тому +1

    It doesn't animate like the example you showed first though....

    • @dereksiuau
      @dereksiuau  3 місяці тому +1

      I will be releasing a follow up tutorial addressing this. But essentially instead of "hide / show" you can set the height of the answer div to be something like 0px then going to auto once expanded.