Accordion in functions.php

  • Resolved pict3000

    (@pict3000)


    9 years, 10 months ago

    In my child theme’s function.php I have a function to add captions below each of 3 images on the homepage. Within those 3 captions I want to add an accordion collapsible to hide subtitles.

    I tried adding this in my js file:

    jQuery(document).ready(function($) {
		$( "#accordion" ).accordion();
	});

    and this is how it is enqueued:

    add_action( 'wp_enqueue_scripts', 'child_theme_js' );
function child_theme_js() {
wp_register_script ('myscripts', get_stylesheet_directory_uri() . '/myscripts.js', array('jquery','jquery-ui-core', 'jquery-ui-accordion'),'', false);
wp_enqueue_script('myscripts');
}

    On the homepage linked below you will see below the first of the 3 images “Tap For Subtitle” and then “Text text text text” which is supposed to be inside an accordion drop down. But it isn’t working.

    Other js in my js file is working fine so I know the script is enqueued.

    Here is the HTML:

    <div id=\"accordion\">
    <h4 class=\"accordion-title\">Tap For Subtitle</h4>
      <p class=\"accordion-content\">Text text text text</p>
      </div>

    Here is the web page:

    https://4ninths.com/

    What am I doing wrong and how can I fix this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter pict3000

    (@pict3000)

    The solution for a single panel accordion — and that’s where the problem lies, a single panel won’t be active by default — is to add
    collapsible: true, active: false
    to the jquery function, like this:

    jQuery(document).ready(function($) {
		$( "#accordion" ).accordion({
			collapsible: true, active: false
		});
	});
    Thread Starter pict3000

    (@pict3000)

    Wow, that worked! Thanks pict3000!

    Thread Starter pict3000

    (@pict3000)

    Don’t mention it. Glad to help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Accordion in functions.php’ is closed to new replies.