Streaming live at 10am (PST)

Adding in a code drop


#1

Hi there,
I want to add an stacked accordion tab to one of my pages. From looking through the forums, for what I want this seems like a known feature that Webflow does not have yet.

So I figured the simplest way would be to add a code drop of an accordian tab that I want. I did follow the tutorials on webflow regarding embedding html code to a page and then using the custom code to add the java / css. However, it still doesn't work.

Here is the code drop I would lke to use:
http://codepen.io/chriswrightdesign/pen/cmanI

Here is my site:
https://webflow.com/design/idx?preview=49272e5eddd961c1e9635527c477d2ab

And I would like to add it to this blank page:
http://idx.webflow.com/faq

Much appreciated,
Luke


#2

Just seeing if anyone out there can help me with this


#3

Hi @LukeB, I am trying to check this more, but from my testing so far, there is something about the javascript that causes an error on the published page... I have not been able to successfully implement this codepen yet. I will continue to check this as I am interested to know what the issue is, in most cases, these codepens work....

I also did a check on the actual javascript outside of putting it into Webflow, and that came back with no errors, so there is something happening during the load process, and the script from codepen is throwing an unexpected token, but when I checked in my javascript editor, I could find no missing braces or items. I am going to check it again though.

You might also consider using some other accordion scripts, there are some good ones on codecanyon that will also work in Webflow. Look in the CSS section. You can probably also find some other good open source ones to check out also. As soon as I have more info, I let you know. If someone else wants to take a crack at deciphering the issue, you are most welcome to help smile

Cheers, Dave


#4

Thank you, let me know if you find anything


#5

Hi @LukeB, I know you asked about the custom code solution, but just for fun, I made a small demo showing how to build something like this in Webflow. Take a peek here:

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Accordion

Hope this helps!

PS: More info on interactions here http://interactions.webflow.com and http://help.webflow.com/interactions and https://webflow.com/design/interactions?preview=e645e218f9fa34829781bf96c365fee9


#6

Thank you very much. Sorry have been tied up in another build but will give this a go asap!


#7

Oh dude that's beauty. So simple it should have been obvious ahah!

Just had to add a few things to give it the desired according styling.

http://idx.webflow.com/faq

Much appreciated,
Luke


#8