[FAQ toggle shortcode] add a shortcode to display a FAQ list from a post type title and description #wordpress

my_custom_faq.php

add_shortcode('my_custom_faq', function($atts){
  $attributes = shortcode_atts( array(
        'key' => "",
    ), $atts );

  $args = array( 
		'post_type'   => 'faq',
		'post_status' => 'publish',
        'posts_per_page' => -1,
        'tax_query'      => array(
            array(
                'taxonomy'  => 'faq_shortcode',
                'field'     => 'slug',
                'terms'     => sanitize_title( $atts['key'] ) //sanitize_title( $atts['key'] )
            ),
			
        )
    );

  $faqs = get_posts( $args );
  //echo count($faqs);

  if( !empty($faqs) ):
  	wp_enqueue_style( 'my-custom-faq-style' );
	wp_enqueue_script( 'my-custom-faq-script' );
  
  	echo "<div class='my_custom_faq'>";
  	  foreach( $faqs as $k => $faq ):

		echo "<div class='my_custom_faq_item container'>";

		echo "<div class='my_custom_faq_question' data-id='" . $k . "'><p>";
		echo $faq->post_title;
		echo '</p></div>';

		echo "<div class='my_custom_faq_answer hidden' data-id='" . $k . "' style='opacity:0;height:0; padding: 0 20px 0 10px;'><p>";
		echo $faq->post_content;
		echo '</p></div>';
  
		echo '</div>';

	  endforeach;
 	echo '</div>';
  endif;
    
});

function kj_enqueue_my_custom_faq() {
  wp_register_style( 'my-custom-faq-style', false );
  wp_register_script( 'my-custom-faq-script', '', array("jquery"), '', true );

  ob_start(); ?>
	
  <style>
	.my_custom_faq{
	  display: block;
	  width: 100%;
	}
	
	.my_custom_faq_item{
	  margin-bottom: 10px;
	}
	
	.my_custom_faq_question{
	  cursor: pointer;
	  width: 100%;
	  position: relative;
	  padding: 12px 20px 12px 10px;
	  background-color: #f4f4f4;
	  border-left-width: 3px;
	  border-left-style: solid;
	  border-left-color: #ff7802;
	}
	
	.my_custom_faq_question::before{
	  border: 6px solid transparent;
	  border-left-color: inherit;
	  right: 5px;
	  content: '';
	  margin-top: -6px;
	  position: absolute;
	  top: 50%;
	}
	
	.my_custom_faq_question.active::before{
	  right: 10px;
	  margin-top: -2px;
	  transform: rotate(90deg);
	  border-left-color: white;
	}
	
	.my_custom_faq_question.active{
	  background-color: #ff7802;
	  color: white;
	}
	
	.my_custom_faq_question p{
	  margin-bottom: 0!important;
	}
	
	.my_custom_faq_answer{
	  transition: max-height 0.25s ease-in;
	  transition: height 0.25s ease-in;
	  transition: opacity 0.1s ease-in;
	  padding: 12px 20px 12px 10px;
	}
	
	.my_custom_faq_answer.hidden{
	  pointer-events: none;
	}
  </style>
  <?php
	$custom_css = ob_get_contents();
	ob_end_clean();
  
  	$custom_css = str_replace("<style>", "", $custom_css);
  	$custom_css = str_replace("</style>", "", $custom_css);

  wp_add_inline_style( 'my-custom-faq-style', $custom_css );
    
  ob_start(); ?>
	<script>
	  jQuery( document ).ready(function($) {
		$('.my_custom_faq_question').on('click', function(){
		  $('.my_custom_faq_question').removeClass("active");
		  $('.my_custom_faq_answer').addClass("hidden");
		  $('.my_custom_faq_answer').css("opacity","0");
		  $('.my_custom_faq_answer').css("height","0");
		  $('.my_custom_faq_answer').css("padding","0 20px 0 10px");
		  
		  $(this).toggleClass("active");
		  var id = $(this).data('id');
		  console.log(id);
		  $(".my_custom_faq_answer[data-id='" + id + "']").removeClass("hidden");
		  $(".my_custom_faq_answer[data-id='" + id + "']").css("height","auto");
		  $(".my_custom_faq_answer[data-id='" + id + "']").css("opacity","1");
		  $(".my_custom_faq_answer[data-id='" + id + "']").css("padding","12px 20px 12px 10px");
		});
	  });
	</script>
  <?php
	$custom_js = ob_get_contents();
	ob_end_clean();
  	
  	$custom_js = str_replace("<script>", "", $custom_js);
  	$custom_js = str_replace("</script>", "", $custom_js);
  
  wp_add_inline_script( 'my-custom-faq-script', $custom_js);

}
add_action( 'wp_enqueue_scripts', 'kj_enqueue_my_custom_faq' );

//create a tag taxonomy for faq post_type
add_action( 'init', 'my_custom_faq_register_taxonomy', 0 );
function my_custom_faq_register_taxonomy() {
  // Add new taxonomy, NOT hierarchical (like tags)
  $labels = array(
    'name' => _x( 'Shortcode Tags', 'taxonomy general name' ),
    'singular_name' => _x( 'Shortcode Tag', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Tags' ),
    'popular_items' => __( 'Popular Tags' ),
    'all_items' => __( 'All Tags' ),
    'parent_item' => null,
    'parent_item_colon' => null,
    'edit_item' => __( 'Edit Tag' ), 
    'update_item' => __( 'Update Tag' ),
    'add_new_item' => __( 'Add New Tag' ),
    'new_item_name' => __( 'New Tag Name' ),
    'separate_items_with_commas' => __( 'Separate tags with commas' ),
    'add_or_remove_items' => __( 'Add or remove tags' ),
    'choose_from_most_used' => __( 'Choose from the most used tags' ),
    'menu_name' => __( 'Shortcode Tags' ),
  ); 

  register_taxonomy('faq_shortcode', 'faq' ,array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'update_count_callback' => '_update_post_term_count',
    'query_var' => true,
    'rewrite' => array( 'slug' => 'shortcode' ),
  ));
}