Improved the generation rules of Categories ID.

Avoid invalidation of icon animations for closed and opened top categories when category names contain a dot.

tabs/categories.md

@@ -11,6 +11,8 @@ title: Categories
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
+{% assign group_index = 0 %}
+
 {% assign sort_categories = site.categories | sort %}
 
 {% for category in sort_categories %}
@@ -36,7 +38,7 @@ title: Categories
   <div class="card categories">
     <!-- top-category -->
     <div class="card-header d-flex justify-content-between hide-border-bottom"
-        id="{{ HEAD_PREFIX }}{{ category_name }}">
+        id="{{ HEAD_PREFIX }}{{ group_index }}">
       <span>
       {% if sub_categories_size > 0 %}
         <i class="far fa-folder-open fa-fw"></i>
@@ -62,7 +64,7 @@ title: Categories
 
       <!-- arrow -->
       {% if sub_categories_size > 0%}
-        <a href="#{{ LIST_PREFIX }}{{ category_name }}" data-toggle="collapse" aria-expanded="true"
+      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" aria-expanded="true"
           class="category-trigger hide-border-bottom">
         <i class="fas fa-fw fa-angle-down"></i>
       </a>
@@ -76,7 +78,7 @@ title: Categories
 
     <!-- Sub-categories -->
     {% if sub_categories_size > 0 %}
-    <div id="{{ LIST_PREFIX }}{{ category_name }}" class="collapse show" aria-expanded="true">
+    <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
       <ul class="list-group">
         {% for sub_category in sub_categories %}
         <li class="list-group-item">
@@ -95,5 +97,7 @@ title: Categories
 
   </div> <!-- .card -->
 
+    {% assign group_index = group_index | plus: 1 %}
+
   {% endif %}
 {% endfor %}