[Support request] No Luck Inserting JS scripts via my Child Theme

[Max]

Tom

In my search for a decent collapsible/accordion menu solution I have be trialing a number of fiddles and code pens from the internet.

I am running a child theme with its own functions.php file.

I am using the following to run Java scripts but not a single one has worked:

add_action( 'wp_footer', 'tu_add_script' );
function tu_add_script() { ?>
<script>
[Test Script Added Here]
</script>
<?php }

I have disabled Autoptimize but still no luck.

What am I doing wrong?

For example

Simple Accordion

When I insert the script from this fiddle as follows it breaks my site:

add_action( 'wp_footer', 'tu_add_script' );
function tu_add_script() { ?>
<script>
$(document).ready(function(){

  var activeAccordion = localStorage.getItem("accordion");
  if(activeAccordion){
  	$('#accordion section:eq('+activeAccordion+') .accordion-content').toggleClass('active');
    localStorage.removeItem("accordion");
  }

	$('#accordion').find('.accordion-toggle').click(function (){

      localStorage.setItem("accordion", $(this).closest('section').index());
      //Expand or collapse this panel
      $(this).next().toggleClass('active');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).removeClass('active');
  });
</script>
<?php }

[Tom]

Try replacing: $(document).ready(function(){

With: jQuery(document).ready(function($){

[Max]

Tom

Thanks for getting back to me.

You should update your profile photo as part of the GP makeover. I am sure the babe in arms is now much bigger.

I apologise that this a long and detailed post. I know you are very busy nowadays. However, it is a difficult topic (with lots of misinformation online), and something that I need to resolve. I also want to avoid playing post tennis between Leo, David and yourself.

1. This thread arises out of another unresolved thread:

Pure CSS accordion

PURE CSS ACCORDION
I want to create simple sidebar accordion menu structured as follows:

Heading 1
Link
Link
Link
Heading 2
Link
Link
Link
Heading 3
Link
Link
Link

Functionality Requirements:
1. When a heading is selected it expands to show links (and previously expanded heading collapses)
2. A heading stays expanded if one of links under it is the current/active page being view.

I know that requirement no.1 can be coded in CSS.

Questions:
1. Can requirement No.2 above also be achieved purely with CSS?
2. If yes, what would the basic Html and CSS look like to code this?

Foot Note: I read in the following thread where you used current-menu-class. Is that of use here?

Submenu item kept visible

ACCORDION WITH MINIMAL JS/jQUERY
I have searched the entire WP repository looking for a decent solution. I could not find one that provides my key requirement. I also want to avoid using a plugin, to avoid bloat, and also because the bulk of plugin menu solutions usually become unsupported and fall into disrepair.

In my other thread David suggested using the Collapse O Matic plugin. I wasted several hours heading down that rabbit hole only to discover that it does not provide the functionality for my key requirement No.2.

The articles and information online relating to running jQuery on a WP installation are very poor and confusing.

The best I could find suggest that I must:

1. Create a JS folder in my child theme.
2. Add to it a .js file (lets say named: my-custom.js)
3. And then insert a script in the function.php file in my child theme to enqueue the my-custom.js file.

The articles are also very confused when it comes to running a jQuery script on WP. Some say you only need to replace the $ in the $(document).ready(function(){ portion of the script. Other articles say that I must go through the whole script and replace ALL $ with jQuery.

Questions
1. Please confirm that to run a js/jQuery script on my site (which has a child theme) I need only insert it in the functions.php file in my child theme folder as follows (with no further enqueuing or other action required):

add_action( 'wp_footer', 'tu_add_script' );
function tu_add_script() { ?>
<script>
[Test Script Added Here]
</script>
<?php }

2. Please confirm that I only need to replace the first $ in the script with jQuery and not ALL of the $.

3. What is the best way to check the added JS/jQuery script is running on my GP site and is error free?

MOVING FORWARD
I am going to use this fiddle from this Stack article to test for proof of concept. It appears to provide the solution that I am chasing.

I report back here with my updates

Please note, if at all possible, I would much prefer using a pure CSS option and not JS/jQuery.

[Max]

I inserted the code below from the linked fiddle into the functions.php file in my child theme folder.

I edited the first line of code reflect the suggestion you posted above: $(document).ready(function(){ to jQuery(document).ready(function($){.

It broke my site.

Notes:

1. I previously ran your smooth scroll JS snippet in the same functions.php file in my child theme. It ran ok.
2. I tried with all plugin deactivated to avoid conflict. Still broke my site.
3. The code did not create any error warnings when displayed in my Cpanel editor.

I tested the following:

add_action( 'wp_footer', 'tu_add_script' );
function tu_add_script() { ?>
<script>
jQuery(document).ready(function($){

  var activeAccordion = localStorage.getItem("accordion");
  if(activeAccordion){
  	$('#accordion section:eq('+activeAccordion+') .accordion-content').toggleClass('active');
    localStorage.removeItem("accordion");
  }

	$('#accordion').find('.accordion-toggle').click(function (){

      localStorage.setItem("accordion", $(this).closest('section').index());
      //Expand or collapse this panel
      $(this).next().toggleClass('active');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).removeClass('active');
  });

});
</script>
<?php }

[Heiko]

Hello!

Try to add inline JS with
wp_add_inline_script.

wp_add_inline_script('myjsaccordion', "jQuery(document).ready(function($) {
                var activeAccordion = localStorage.getItem("accordion");
  if(activeAccordion){
  	$('#accordion section:eq('+activeAccordion+') .accordion-content').toggleClass('active');
    localStorage.removeItem('accordion');
  }

	$('#accordion').find('.accordion-toggle').click(function (){

      localStorage.setItem('accordion', $(this).closest('section').index());
      //Expand or collapse this panel
      $(this).next().toggleClass('active');

      //Hide the other panels
      $('.accordion-content').not($(this).next()).removeClass('active');
  });
});" );

Best regards,
Heiko

[Tom]

When you say “it broke my site”, can you be more specific? What about your site broke?

Have you considered going the easy route with something like this?: https://wordpress.org/plugins/accordions/

[Max]

Heiko

Welcome and pleased to meet you!

I tested your code in my functions.php file. Is that where is supposed to live?

It returned the following error in my Cpanel edit screen:

Syntax error, unexpected T_STRING, ',' or ')'

Tom

Thanks for your plugin suggestion.

I had already tried that one. It is very bloated with uneeded themes and styling options and the two functions I require: nesting and stay open on active are only available in the premium version.

I want to create a lightweight solution to which I can add my own styling.

With regards to “broke my site” I got a blank white screen.

UPDATE
The plot has thickened a little more.

After the JS script failed in my functions.php file (the same one where I previously ran your slow scoll script) I did the following:

1. I created a folder in my child theme called: js
2. I created a file in the folder called my-custom.js
3. I added the exact same JS script that failed in my functions.php file as the content of the my-custom.js file
4. I added the following to my functions.php file to enqueue the my-custom.js script:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'my-accordion-script', 
       get_stylesheet_directory_uri() . '/js/my-custom.js', 
       array('jquery') 
    );

    wp_enqueue_script('my-accordion-script');
}

The script (and the demo accordion) is now working.

Questions
1. How come the script will not run from my functions.php file?
2. Before I reluctantly head down the jQuery rabbit hole, can you please confirm that I am not able to get my desired (A heading stays expanded if one of links under it is the current/active page being view) function just using pure CSS.

[Heiko]

1. Because I did not replace every double quote to a single quote and that why your code escaped. This one should work in your functions.php:

wp_add_inline_script('myjsaccordion', "jQuery(document).ready(function($) {
                var activeAccordion = localStorage.getItem('accordion');
  if(activeAccordion){
  	$('#accordion section:eq('+activeAccordion+') .accordion-content').toggleClass('active');
    localStorage.removeItem('accordion');
  }

	$('#accordion').find('.accordion-toggle').click(function (){

      localStorage.setItem('accordion', $(this).closest('section').index());
      //Expand or collapse this panel
      $(this).next().toggleClass('active');

      //Hide the other panels
      $('.accordion-content').not($(this).next()).removeClass('active');
  });
});" );

But it could be, that there is another syntax error in your or my code. 🙂

Best regards,
Heiko

[Max]

Heiko

Thanks for you input.

Your latest version does not work.

Kind Regards

Max

[Heiko]

What does not work mean? But you have a working version, so everything should be fine. 🙂

[Tom]

1. It really depends on what exactly you were adding to your functions. One possibility is that you’ve set jquery as a dependency, which will load it. It’s possible that jQuery itself wasn’t loading before.

2. This really depends as well. You could likely target a page using its body class, then target one of the tabs using that selector:

.page-id-10 .my-accordion-tab

However, that depends on how the tabs are constructed etc..

[Max]

Good Grief…

The information on Reddit, Sitepoint and Stack for this topic is a mess of misinformation and garbage.

And the documentation for the jQuery UI is almost non existant.

Where is the best place to find learning materials and ask for assistance for JS jQuery.

And please don’t say Stack its a disaster.

[Heiko]

Read a book? 😉

https://www.packtpub.com/tech/jQuery

[Tom]

Personally I love Stackoverflow – it has taught me a lot when it comes to all kinds of languages 🙂

[Max]

Stack is OK. It is the topic of JQuery that is a disaster.

Heiko: Thanks for the link.

Tom
I note you have created a handful of WP plugins.

Can you please outline the steps to register a plugin in the WP repository.

Thanks

[Author]

Posts