Creating Custom Snippet for Multi tab code

I created a snippet for multitab code (Custom HTML, tailwind, CSS class, and JS). I added CSS to my theme. I also added JavaScript (to handle button click and change view) to the bottom of the post page (wrapped by ) in my theme. But it doesn’t seem to be working. Can you please guide me? Here is Working code in JSFiddle

All of HTML from above snippet is added to ghost editor as snippet.

This is how I converted it to .hbs: Theme code

This is how it looks right now, and clicking on tab (Tab 2 or Tab 3) doesn’t do anything at all.


If you can link the live site, it’ll be easier to help you. It’s hard to translate “it doesn’t seem to be working” into a specific problem. I don’t know what I’m looking for…

1 Like

Sorry, I’m just working locally, so there’s no live site link.

Problem: I made a HTML snippet (inside ghost editor) that needs some JavaScript to function properly. I was looking for a proper way to inject JavaScript so that my snippet would work. What will the snippet do? For my blog post, I want to write code examples both in JavaScript and Typescript so readers can choose what they are comfortable with. Demoed in JSFiddle link.

Update: I worked it out though (I think). Instead of injecting JavaScript code into theme, I made script as part of my snippet.
Not sure about best practice though. Is there a better way?

1 Like

That option has the advantage of only running the script on pages where you want it.

If you go back to building it into the theme, you need to make sure it runs after the part of the page it is supposed to modify is loaded. That can be accomplished by putting it after the body content or by using an event listener to fire it on DOMcontentloaded.

1 Like

I tried with DOMContentLoaded, but somehow it didn’t work for me.

Looking at your theme code quickly, it looks like your click handler won’t have access to the tab variables. You can test by adding some console logs in the function to see if the data is as expected.

If not, you’ll need to move the variables or function declaration so they’re in the scope of whatever needs.

1 Like