We are using advanced sidebar pages menu:


to expand / collapse children menus on a sidebar.

By default, the parent sidebar menu is expanded, represented by UP arrow and the children of the parent sidebar are collapsed, represented by DOWN arrow.

If a user wishes to see the contents of each children menu, s/he clicks to expand this.

enter image description here

This works well.

The issue we are currently having is that we would like to get some of those children menus expanded by default just like the parents.

To do this, I created a script file called customp-scrpt.js and used the following custom script:

(function ($) {
    $( function() {
        setTimeout(function () {
            $('page-id-2110 .child-sidebar-menu .has_children.closed span').click();
               }, 500);

Credit: Mat Lipe, author of the plugin from the link above.

I added this file into the theme js file.

Then I used the following script to register the above script file:

function wptuts_scripts_with_jquery()
    // I can register the script it for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ) );

    // Enqueue the script:
    wp_enqueue_script( 'custom-script' );
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' );

I added this script to the functions.php file inside wp_includes folder.

So far, this script is not doing what it is intended to do.

All the children of parent menus have all stayed closed, especially the ones we are interested in keeping expanded by default.

Any ideas what could be missing or what I am doing wrong?

  • Run the functional bit of your JavaScript from the timeout callback in your browser's JS console to make sure it works as expected. In this case, page-id-2110 should probably either be .page-id-2110 or #page-id-2110, unless your site uses a custom <page-id-2110> element. If you/your company did not author the theme you are using, you should instead implement your functionality in a custom plugin or child theme so it does not get overwritten by an update. You might also consider implementing this in PHP instead of on the front-end for a somewhat more reliable reliable user experience. – bosco Sep 27 '18 at 3:12
  • It's difficult to say what might be going wrong from that code alone. You should investigate to find some more symptoms: place a console.log('LOADED') on the very first line of custom-script.js. Stick a console.log('TIMEOUT') at the top of your timeout callback function (on a new line below setTimeout(function () {). (Hard) refresh your page and check your browser's console. If you see LOADED, then you've confirmed that your script is successfully loading and executing. If TIMEOUT appears then you have confirmed that your function is getting called. – bosco Sep 27 '18 at 3:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.