Multilevel toggle category menus

This is a shortcode with parameters that loads a list of CPT taxonomy terms and their child terms in toggles – used as a menu in mega menu widget

// shortcode to list child categories (conferences) and teams for each
function conference_menu_list($attr){
    $attributes = shortcode_atts( array(
        'team-subcat' => 'conference',
    ), $attr );

    $current_term = $attributes['team-subcat'];
    $taxonomy_name = 'sport';
	//get child terms of conference
	$termchildren = get_terms( 
        array(
            'taxonomy'   => 'sport',
            'hide_empty' => false,
            'parent'     => $current_term,
			'orderby'	=> 'name',
			'order'		=> 'ASC',
            ) 
    );
	//sort array by name
    usort($termchildren, function($a, $b){
		return strcmp($a->name, $b->name);
	});
    foreach ( $termchildren as $child ) {
        //$catstring .= '<li class="conferencename"><a href="' . get_term_link( $child, $taxonomy_name ) . '">' . $term->name . '</a></li>';
		$catstring .= '<button type="button" class="collapsible">' . $child->name . '</button>';
		$catstring .= '<div class="content">';
		
		//loop through child category and get team list
		$args = array('post_type' => 'team',
			'tax_query' => array(
				array(
					'taxonomy' => 'sport',
					'field' => 'slug',
					'terms' => $child->slug,
				)
			),
			'order' => 'ASC',
			'posts_per_page' => 1000,
			);
		$loop = new WP_Query($args);
		while($loop->have_posts()) : $loop->the_post();
			$catstring .= '<p class="conferenceteam"> - <a href="' . get_the_permalink() . '">' . get_the_title() . '</a></p>';
		endwhile; 
		wp_reset_query();
        
		$catstring .= '</div>';  //end content
    }
	return $catstring;
}
add_shortcode('conference_menu', 'conference_menu_list');

CSS to open and close the toggles

/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
padding: 4px0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 13px;
background-color: #fff;
border-bottom: 1pxsolid#efefef;
font-family: "Nunito Sans";
font-weight: 400;
letter-spacing: 0px;
font-style: normal;
}
.collapsible:hover{ color: #be1e2d !important; }
.collapsible:before {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 8px;
float: left;
margin-right: 5px;
}
.active:before {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0;
display: none;
overflow: hidden;
}

Javascript to open and close toggles
Place in the BEFORE end of BODY tag in Avada Options -> Advanced -> Code

<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>