[Support request] Where to put JS for creating accordion content in WP

[Vera]

This might not be specifically a GP-solvable problem, but I’m hoping someone can help a non-scripter like me find a solution. It’s mainly about where to put a script to get it to work.

I’m using the examples from here to create an accordion with collapsible content, but it isn’t working. I realize there are plugins for this, but I need it for a lot of pages and entries and I worry that a plugin publisher will stop supporting the plugin. It has happened to me before. Apart from that, making minor edits can be a hassle when I have to go into the plugin’s setting. I’d rather work on the page where the accordion displays. I figure JS will be a safer route in both cases.

I didn’t customize anything in the provided examples — I just copy/pasted everything to see if it would even work and am saving the customization for later.

I copied the example HTML into the test WP page here and pasted the CSS into the Simple CSS box on the same page. I then created a js snippet using the Snippets plugin. The example didn’t say where to put the script for WP, so I tried both the Only run on site front-end and the Run snippet everywhere option in Snippets. Neither one worked.

I then tried creating a wp_head GP Hook element with the script and assigned it to only display for the Accordion Test page. Tried the same with generate_after_main_content. Neither worked. It highlights the <script> tags in yellow and I’m not sure if that’s syntax styling or a syntax error indicator. I’m assuming it’s an error.

I also tried emptying my browser cache a few times and reloading the page.

Would you be able to straighten me out on how to get this to work — if it’s even possible with WP?

Usual environment: Mac OS 10.15.7
Also iPad Pro, usually the latest iOS

[Elvin]

This is indeed outside of GP support’s scope.

But for the sake of imparting knowledge:

You can place everything inside a Custom HTML, including the <script> and <style>.
Here’s a sample. Accordion Sample

Just make sure the HTML tag comes before the script tag, else there’s a chance it won’t work.

Your script snippet didn’t work because you added it on wp_head or anywhere before your HTML tags loaded. If you hook it on wp_footer or anywhere after your HTML tags, it should work.

A wise man once said:
"Have you cleared your cache?"

[Vera]

I turned off the Snippet and tried getting it to work solely with GP Hook Elements.

I studied the html in your example and I got my script to appear after the accordion HTML, like yours, except mine is wrapped in <p> tags and I can’t get rid of those (WP forces them). If the <p> tags are an issue, could you tell me exactly how you did yours? Maybe a screenshot of WP’s text view, if that’s where you added it?

I also don’t know what you mean by a Custom HTML. Do you mean using a custom hook in GP Elements? I saw the setting but have no idea how to make it work.

I attached a screenshot of the hook settings I tried in GP Elements — with the script hooked onto wp_footer, as you suggested. It displayed the script after my accordion HTML but not immediately after (if that’s what you meant). It was farther down in the HTML (where other scripts appeared — but I don’t see anything that indicates it’s in the footer), but it still didn’t work. To avoid conflict, I deleted this hook when I pasted the accordion JS into the WP page content as described earlier. Does this screenshot indicate something that I’m doing wrong with this kind of hook? The yellow highlights make me wonder.

My accordion CSS rules are still in Simple CSS for this test page only. Since it’s a GP product, I assume it’s ok.

Usual environment: Mac OS 10.15.7
Also iPad Pro, usually the latest iOS

[Elvin]

I also don’t know what you mean by a Custom HTML. Do you mean using a custom hook in GP Elements? I saw the setting but have no idea how to make it work.

My bad, I shouldn’t been more concise. I meant the Custom HTML Block on Gutenberg Editor.

I literally just copied and pasted the <style>, html tags inside <body> and the <script> on your example.

Here’s a demo video. https://share.getcloudapp.com/8LurJ2lL

I attached a screenshot of the hook settings I tried in GP Elements — with the script hooked onto wp_footer, as you suggested. It displayed the script after my accordion HTML but not immediately after (if that’s what you meant). It was farther down in the HTML (where other scripts appeared — but I don’t see anything that indicates it’s in the footer), but it still didn’t work. To avoid conflict, I deleted this hook when I pasted the accordion JS into the WP page content as described earlier. Does this screenshot indicate something that I’m doing wrong with this kind of hook? The yellow highlights make me wonder.

That should work too. Maybe you forgot to set the display location rule to the page where you’ve added the HTML tags.

Here’s a demo of it working. I added the style and script on a hook element placed on wp_footer with display rules pointed to my script test page.
https://share.getcloudapp.com/ApuLrK5L

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts