How to integrate custom code (HTML, CSS, JS) from for example codepen?

I’m looking for the steps needed to integrate custom code (HTML, CSS, JS), for example this Read More-button code from codepen

What I’ve tried:

  • copying the CSS code into the page header (contained inside <style> </style>)
  • copying the JS code into the page footer (contained inside (<script> </script>)
  • copying the HTML code into the a code widget

I get the button showing, the custom colors appearing, but the button doesn’t work.

No need for Codepen. What you’re looking for can be simply achieved with “toggle visibility” which is baked into Blocs.
Kapture 2021-10-16 at 19.50.13

1 Like

That’s great @Jerry!

I’m also wondering how to generally import external CSS/JS/HTML code to Blocs from other codepen projects?

In general (but not written in stone) :

Al HTML goes into a Code Bric. All CSS into the page footer and all. JS into the page header.

1 Like

If your project is set to Bootstrap 5 that code won’t work because it’s jquery not pure JavaScript. Bootstrap 5 no longer needs the dependency, which is a good thing as it’s less overhead on your site. Just something you need to be aware of.

1 Like

The answer is under need it! :upside_down_face:

Great, thanks for explaining that!