Below is the fiddle and snippet: https://jsfiddle.net/e130kr2x/
I've successfully achieved animating the SVG when a tab is active, but I'm facing difficulty in making it not display or fade out when opening a new tab. The new tab should activate and animate the SVG one after another.
-- First query: Is there a CSS-only approach instead of embedding the SVG in every tab in the HTML? I considered using the image attribute, but it doesn't support animation.
-- Second query: The SVG animation stays under inactive tabs. How can I make it hide or fade out when a tab is inactive?
Additionally, I'd appreciate guidance on moving my JS script from the HTML file to a separate JS file. I am new to JS, so thank you for any advice.
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
<!-- More CSS code here -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- More JS script here -->
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<!-- Embedded SVG contents here -->