Title: JQuery Accordion
Last modified: August 30, 2016

---

# JQuery Accordion

 *  Resolved [NLCW88](https://wordpress.org/support/users/nlcw88/)
 * (@nlcw88)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/jquery-accordion/)
 * Sorry to bother, but I am having trouble getting the JQuery accordion to work
   on my Child Theme.
 * I have created a new functions.php file to register and then enqueue the relevant
   scripts on my page:
 *     ```
       function add_accordion() {
       	wp_enqueue_script( 'add-accordion', get_template_directory_uri() . '/js/accordion.js', array('jquery-ui-core', 'jquery-ui-accordion') );
       }
   
       add_action( 'wp_enqueue_scripts', 'add_accordion' );
       ```
   
 * I have created a custom accordion.js file saved in a folder called js, which 
   is in turn saved in the root folder of the child theme:
 *     ```
       //Accordion Widget
       jQuery(document).ready(function($) {
       		$( "#accordion" ).accordion();
       	});
       ```
   
 * I have used the following mark up in my HTML:
 *     ```
       <div id = "accordion">
       <h3>Header 1</h3>
       <div>
       <p>
       Content 1 Content 1 Content 1
       </p>
       </div>
   
       <h3>Header 2</h3>
       <div>
       <p>
       Content 2 Content 2 Content 2
       </p>
       </div>
   
       <h3>Header 3</h3>
       <div>
       <p>
       Content 3 Content 3 Content 3
       </p>
       </div>
   
       <h3>Header 4</h3>
       <div>
       <p>
       Content 4 Content 4 Content 4
       </p>
       </div>
   
       </div>
       ```
   
 * However, I am not getting any response.
    Could you please let me know where I
   am going wrong?
 * Thanks so much!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [potentdevelopment](https://wordpress.org/support/users/potentdevelopment/)
 * (@potentdevelopment)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/jquery-accordion/#post-6799122)
 * What does your console say? Sounds like it should be throwing an error. That 
   would be the first place to start.
 *  Thread Starter [NLCW88](https://wordpress.org/support/users/nlcw88/)
 * (@nlcw88)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/jquery-accordion/#post-6799127)
 * Hi potentdevelopment,
 * Thanks for the feedback.
    You were right, I looked at the console which led me
   to discover that I was using `get_template_directory_uri().` to call the accordion.
   js file. This was wrong as it was searching the parent theme folder, which didn’t
   have the above file. Instead, I should have been using `get_stylesheet_directory_uri().`
   as this is a child theme. I now don’t have any errors in the JavaScript Console.
 * However, the accordion function still isn’t working!
 * Cheers.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 5 months ago](https://wordpress.org/support/topic/jquery-accordion/#post-6799135)
 * Try removing the spaces on:
 *     ```
       id = "accordion">
       ```
   
 * E.g.:
 *     ```
       id="accordion">
       ```
   
 *  [Ravikumar Patel](https://wordpress.org/support/users/ravipatel/)
 * (@ravipatel)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/jquery-accordion/#post-6799172)
 * Hello NLCW88,
    U have insert external jQuery but all ready wordpress is provided
   default jquery for this.
 * [https://codex.wordpress.org/Function_Reference/wp_enqueue_script](https://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress)
 *     ```
       <?php wp_enqueue_script('jquery-ui-accordion'); ?>
       ```
   
 * [And demo for structured](http://jqueryui.com/accordion/)
 * [More info](https://wordpress.org/support/topic/enqueue-jquery-to-use-accordion-and-tabs?replies=6)
 *  Thread Starter [NLCW88](https://wordpress.org/support/users/nlcw88/)
 * (@nlcw88)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/jquery-accordion/#post-6799179)
 * Hi Andrew,
 * Thanks for the advice. I removed the spaces and it worked. Thanks a lot!
 * Hi Ravi,
 * Sorry, I’m new to this so don’t have the depth of understanding that you have.
   From what you said, if the JQuery UI is already enqueued automatically by WordPress
   I assume that all you have to do is call the Accordion function in the HTML. 
   Therefore, I deleted
 *     ```
       function add_accordion() {
       	wp_enqueue_script( 'add-accordion', get_stylesheet_directory_uri() . '/js/accordion.js', array('jquery-ui-core', 'jquery-ui-accordion') );
       }
   
       add_action( 'wp_enqueue_scripts', 'add_accordion' );
       ```
   
 * in functions.php. However, the accordion stopped working.
 * I reinserted the code and it worked again. Do you have a more elegant method 
   that I am missing?
 * Thanks all.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘JQuery Accordion’ is closed to new replies.

## Tags

 * [enqueue](https://wordpress.org/support/topic-tag/enqueue/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [js](https://wordpress.org/support/topic-tag/js/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 4 participants
 * Last reply from: [NLCW88](https://wordpress.org/support/users/nlcw88/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/jquery-accordion/#post-6799179)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics