jQuery: multiple accordions on 1 wordpress page

accordion.js

jQuery( function($) {
$( "#accordion:nth-child(1n)" ).accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
} );
  

functions.php

/* You'll need to add this enqeue script to your functions.php file to have the jQuery script load */

function my_scripts_method() {
if ( !is_admin() ) {
	wp_enqueue_script('jquery-ui-accordion');
	wp_enqueue_script(
		'custom-accordion',
		get_stylesheet_directory_uri() . '/js/accordion.js',
		array('jquery')
		);
	
  /*unrelated script for tabs */
  wp_enqueue_script('jquery-ui-tabs');
	wp_enqueue_script(
		'custom-tabs',
		get_stylesheet_directory_uri() . '/js/tabs.js',
		array('jquery')
		);
	
	}
}
add_action('wp_enqueue_scripts', 'my_scripts_method');


wp_register_style('jquery-custom-style', get_stylesheet_directory_uri().'/css/jquery-ui-1.12.1.custom/jquery-ui.css', array(), '1', 'screen'); 
wp_enqueue_style('jquery-custom-style');

files that need to be edited: functions.php, CSS Folder, JS Folder (or wherever your sites javascript is being loaded from)

You'll need to add the jQuery UI style sheet to your CSS folder and declare the path. using this code:

`add_action('wp_enqueue_scripts', 'my_scripts_method');

wp_register_style('jquery-custom-style', get_stylesheet_directory_uri().'/css/jquery-ui-1.12.1.custom/jquery-ui.css', array(), '1', 'screen');
wp_enqueue_style('jquery-custom-style');`

This has been tested and works fine. The jQuery here $( "#accordion:nth-child(1n)" ).accordion({
allows you to have more than one accordion on the page. Helpful if you're loading two or if you have a sidebar that uses that same functionality and will load on pages with pre-existing accordions.

Does not load the script if you're in the admin area of the WordPress Dashboard (avoids conflicts with CMS and editor)

will allow multiple jQuery accordions on the page