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.
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…
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?
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.
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.
