[ WordPress ] Product category accordion + load inline SVG

functions.php

<?php
// load inline SVG
function ds_load_inline_svg($filename, $class = 'ds-icon-svg')
{
	// Add the path to your SVG directory inside your theme.
	$svg_path = '/assets/img/svg/';
	// Check the SVG file exists
	if (file_exists(get_stylesheet_directory() . $svg_path . $filename)) {
		$svg = '';
		$svg .= '<div class="ds-icon ' . $class . '">';
		$svg .= file_get_contents(get_stylesheet_directory() . $svg_path . $filename);
		$svg .= '</div>';
		// Load and return the contents of the file
		return $svg;
	}
	// Return a blank string if we can't find the file.
	return '';
}

icon-arrow-down.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.02 7.09"><path fill="none" stroke="#211815" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="M14.37.65L7.51 6.44.65.65"/></svg>

script.js

(function ($) {
  $(document).ready(function () {
    $(".ds-accordion .ds-accordion-section-title").click(function (e) {
      $(".ds-accordion-section").removeClass("active");
      $(this).parent().addClass("active");
      $(".ds-accordion-section-content").slideUp(300);
      $(this).next().slideDown(300);
      e.preventDefault();
    });
  });
})(jQuery);

style.css

/* product category accordion */
.ds-accordion a {
	outline: 0;
}
.ds-accordion-section {
	padding: 10px 0;
}
.ds-accordion-section-title {
	color: #211815;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ds-accordion-section-content {
    display: none;
}
.ds-accordion-section-content a {
	color: #231815;
    display: inline-block;
    width: 100%;
}
.ds-accordion-section-title .ds-icon {
	transition: transform 0.8s;
	pointer-events: none;
  width: 14px;
}
.ds-accordion-section-title.active .ds-icon {
	transform: rotateX(180deg);
	transform-style: preserve-3d;
}

template.php

<?php $categories = get_terms('product_cat', array(
  'orderby'    => 'name',
  'order'      => 'ASC',
  'hide_empty' => true,
  'parent'     => 0
)); ?>
<div class="dejavu-product-categories-wrap">
  <h4 class="dejavu-product-categories-title">商品分類</h4>
  <div class="ds-accordion">
    <?php foreach ($categories as $category) : ?>
      <div class="ds-accordion-section">
        <a class="ds-accordion-section-title" href="#accordion-<?php echo $category->term_id; ?>"><?php echo $category->name; ?><?php echo ds_load_inline_svg('icon-arrow-down.svg', 'toggle-icon'); ?></a>
        <?php
        $child_categories = get_terms('product_cat', array(
          'orderby'    => 'name',
          'order'      => 'ASC',
          'hide_empty' => false,
          'parent'     => $category->term_id
        )); ?>
        <?php if (!empty($child_categories)) : ?>
          <div id="accordion-<?php echo $category->term_id; ?>" class="ds-accordion-section-content">
            <?php foreach ($child_categories as $child_category) { ?>
              <a href="<?php echo get_term_link($child_category->slug, 'product_cat'); ?>"><?php echo $child_category->name; ?></a>
            <?php } ?>
          </div>
        <?php endif; ?>
      </div>
    <?php endforeach; ?>
  </div>
</div>