ndpm13.github.io/layouts/partials/accordion/skill.html

<script>
  let skillPanel = document.querySelector("#skill-panel")
    .previousElementSibling;
  skillPanel.addEventListener("click", function() {
    let skillBars = document.querySelectorAll("#skill-percent");
    skillBars.forEach(elem => {
      elem.style.width = elem.classList[0];
    });
  });
</script>
{{ range.Site.Params.skill.list }}
<code>{{ .skill }}</code>
<div class="w-100 mt-1 mb-3 border border-black dark:border-gray-300 rounded" style="height: 1.25rem;">
  <div id="skill-percent" class="{{ .skillrating }}% bg-blue-500 dark:bg-yellow-700 h-full rounded" style="width: 0; transition: all 0.5s;"></div>
</div>
{{ end }}