Mixing
How to hide/show an animated svg depending on active tab?
0
Fiddle and snippet bellow : https://jsfiddle.net/e130kr2x/
I want the svg to animate when one of my tab is active (achieved) and to not display or fade out when I open a new tab (not achieved). This new tab will now be active and animate the svg and so on (achieved).
-- First question : I did copy the svg in my html for every tab. Is there a way to do this only in css instead of copying the svg in every tab ? I thought about the image attribute but it does not support animation.
-- Second question : I have the svg animate under every active tab but it is staying under inactive tabs. How to make it not display or fade out when tab becomes inactive ?
Also, kinda off topic, but if someone can show me how to move my js script in a js file instead of the html file, I'd be grateful. I'm still new to js. Thank you for your suggestions.
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
#my-tab ul.tabs{
display:block;
margin:0;
padding:0;
list-style-type:none;}
#my-tab ul.tabs > li{
display:block;
float:left;
margin-bottom:0;
padding:0;
width:17%}
#my-tab ul.tabs li a{
font-size:15px;
height:45px;
line-height:30px;
margin:0;
padding:7px 12px;
text-decoration:none;
width:auto;
font-weight:700;
color:#303030;}
.flex2 {
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;
padding: 0 10px;}
/* SVG ANIMATION bELLOW */
#my-tab ul.tabs li a.active path {
stroke:#6594F6;
fill:#6594F6;
stroke-dasharray:330;
opacity:1;
animation: animate 3s cubic-bezier(.27,.6,.8,.77);}
@keyframes animate {
0% {
opacity:0;
fill:none;
stroke-dashoffset:330;
}
30% {
opacity:1;
fill:none;
stroke-dashoffset:330;
}
90% {
fill: rgba(255,255,255,0);
}
100% {
opacity:1;
fill: rgba(255,255,255,1);
stroke-dashoffset:0;
}
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<div class="flex2">
<li><a href="#tab-1"><span class="tab1 text-link1">
Description
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
<li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
Livraison
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</a></li>
<li><a href="#tab-3"><span class="tab4">
Nos avantages
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
</div>
<div id="tab-1">
I'm the first
</div>
<div id="tab-2">
I'm number 2
</div>
<div id="tab-3">
I'm the last one.
</div>
</ul>
html css svg tabs
asked Nov 22 '18 at 1:57
MaxMax
286
add a comment |
0
Fiddle and snippet bellow : https://jsfiddle.net/e130kr2x/
I want the svg to animate when one of my tab is active (achieved) and to not display or fade out when I open a new tab (not achieved). This new tab will now be active and animate the svg and so on (achieved).
-- First question : I did copy the svg in my html for every tab. Is there a way to do this only in css instead of copying the svg in every tab ? I thought about the image attribute but it does not support animation.
-- Second question : I have the svg animate under every active tab but it is staying under inactive tabs. How to make it not display or fade out when tab becomes inactive ?
Also, kinda off topic, but if someone can show me how to move my js script in a js file instead of the html file, I'd be grateful. I'm still new to js. Thank you for your suggestions.
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
#my-tab ul.tabs{
display:block;
margin:0;
padding:0;
list-style-type:none;}
#my-tab ul.tabs > li{
display:block;
float:left;
margin-bottom:0;
padding:0;
width:17%}
#my-tab ul.tabs li a{
font-size:15px;
height:45px;
line-height:30px;
margin:0;
padding:7px 12px;
text-decoration:none;
width:auto;
font-weight:700;
color:#303030;}
.flex2 {
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;
padding: 0 10px;}
/* SVG ANIMATION bELLOW */
#my-tab ul.tabs li a.active path {
stroke:#6594F6;
fill:#6594F6;
stroke-dasharray:330;
opacity:1;
animation: animate 3s cubic-bezier(.27,.6,.8,.77);}
@keyframes animate {
0% {
opacity:0;
fill:none;
stroke-dashoffset:330;
}
30% {
opacity:1;
fill:none;
stroke-dashoffset:330;
}
90% {
fill: rgba(255,255,255,0);
}
100% {
opacity:1;
fill: rgba(255,255,255,1);
stroke-dashoffset:0;
}
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<div class="flex2">
<li><a href="#tab-1"><span class="tab1 text-link1">
Description
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
<li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
Livraison
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</a></li>
<li><a href="#tab-3"><span class="tab4">
Nos avantages
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
</div>
<div id="tab-1">
I'm the first
</div>
<div id="tab-2">
I'm number 2
</div>
<div id="tab-3">
I'm the last one.
</div>
</ul>
html css svg tabs
asked Nov 22 '18 at 1:57
MaxMax
286
add a comment |
0
0
0
Fiddle and snippet bellow : https://jsfiddle.net/e130kr2x/
I want the svg to animate when one of my tab is active (achieved) and to not display or fade out when I open a new tab (not achieved). This new tab will now be active and animate the svg and so on (achieved).
-- First question : I did copy the svg in my html for every tab. Is there a way to do this only in css instead of copying the svg in every tab ? I thought about the image attribute but it does not support animation.
-- Second question : I have the svg animate under every active tab but it is staying under inactive tabs. How to make it not display or fade out when tab becomes inactive ?
Also, kinda off topic, but if someone can show me how to move my js script in a js file instead of the html file, I'd be grateful. I'm still new to js. Thank you for your suggestions.
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
#my-tab ul.tabs{
display:block;
margin:0;
padding:0;
list-style-type:none;}
#my-tab ul.tabs > li{
display:block;
float:left;
margin-bottom:0;
padding:0;
width:17%}
#my-tab ul.tabs li a{
font-size:15px;
height:45px;
line-height:30px;
margin:0;
padding:7px 12px;
text-decoration:none;
width:auto;
font-weight:700;
color:#303030;}
.flex2 {
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;
padding: 0 10px;}
/* SVG ANIMATION bELLOW */
#my-tab ul.tabs li a.active path {
stroke:#6594F6;
fill:#6594F6;
stroke-dasharray:330;
opacity:1;
animation: animate 3s cubic-bezier(.27,.6,.8,.77);}
@keyframes animate {
0% {
opacity:0;
fill:none;
stroke-dashoffset:330;
}
30% {
opacity:1;
fill:none;
stroke-dashoffset:330;
}
90% {
fill: rgba(255,255,255,0);
}
100% {
opacity:1;
fill: rgba(255,255,255,1);
stroke-dashoffset:0;
}
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<div class="flex2">
<li><a href="#tab-1"><span class="tab1 text-link1">
Description
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
<li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
Livraison
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</a></li>
<li><a href="#tab-3"><span class="tab4">
Nos avantages
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
</div>
<div id="tab-1">
I'm the first
</div>
<div id="tab-2">
I'm number 2
</div>
<div id="tab-3">
I'm the last one.
</div>
</ul>
html css svg tabs
asked Nov 22 '18 at 1:57
MaxMax
286
Fiddle and snippet bellow : https://jsfiddle.net/e130kr2x/
I want the svg to animate when one of my tab is active (achieved) and to not display or fade out when I open a new tab (not achieved). This new tab will now be active and animate the svg and so on (achieved).
-- First question : I did copy the svg in my html for every tab. Is there a way to do this only in css instead of copying the svg in every tab ? I thought about the image attribute but it does not support animation.
-- Second question : I have the svg animate under every active tab but it is staying under inactive tabs. How to make it not display or fade out when tab becomes inactive ?
Also, kinda off topic, but if someone can show me how to move my js script in a js file instead of the html file, I'd be grateful. I'm still new to js. Thank you for your suggestions.
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
#my-tab ul.tabs{
display:block;
margin:0;
padding:0;
list-style-type:none;}
#my-tab ul.tabs > li{
display:block;
float:left;
margin-bottom:0;
padding:0;
width:17%}
#my-tab ul.tabs li a{
font-size:15px;
height:45px;
line-height:30px;
margin:0;
padding:7px 12px;
text-decoration:none;
width:auto;
font-weight:700;
color:#303030;}
.flex2 {
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;
padding: 0 10px;}
/* SVG ANIMATION bELLOW */
#my-tab ul.tabs li a.active path {
stroke:#6594F6;
fill:#6594F6;
stroke-dasharray:330;
opacity:1;
animation: animate 3s cubic-bezier(.27,.6,.8,.77);}
@keyframes animate {
0% {
opacity:0;
fill:none;
stroke-dashoffset:330;
}
30% {
opacity:1;
fill:none;
stroke-dashoffset:330;
}
90% {
fill: rgba(255,255,255,0);
}
100% {
opacity:1;
fill: rgba(255,255,255,1);
stroke-dashoffset:0;
}
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<div class="flex2">
<li><a href="#tab-1"><span class="tab1 text-link1">
Description
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
<li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
Livraison
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</a></li>
<li><a href="#tab-3"><span class="tab4">
Nos avantages
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
</div>
<div id="tab-1">
I'm the first
</div>
<div id="tab-2">
I'm number 2
</div>
<div id="tab-3">
I'm the last one.
</div>
</ul>
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
#my-tab ul.tabs{
display:block;
margin:0;
padding:0;
list-style-type:none;}
#my-tab ul.tabs > li{
display:block;
float:left;
margin-bottom:0;
padding:0;
width:17%}
#my-tab ul.tabs li a{
font-size:15px;
height:45px;
line-height:30px;
margin:0;
padding:7px 12px;
text-decoration:none;
width:auto;
font-weight:700;
color:#303030;}
.flex2 {
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;
padding: 0 10px;}
/* SVG ANIMATION bELLOW */
#my-tab ul.tabs li a.active path {
stroke:#6594F6;
fill:#6594F6;
stroke-dasharray:330;
opacity:1;
animation: animate 3s cubic-bezier(.27,.6,.8,.77);}
@keyframes animate {
0% {
opacity:0;
fill:none;
stroke-dashoffset:330;
}
30% {
opacity:1;
fill:none;
stroke-dashoffset:330;
}
90% {
fill: rgba(255,255,255,0);
}
100% {
opacity:1;
fill: rgba(255,255,255,1);
stroke-dashoffset:0;
}
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<div class="flex2">
<li><a href="#tab-1"><span class="tab1 text-link1">
Description
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
<li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
Livraison
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</a></li>
<li><a href="#tab-3"><span class="tab4">
Nos avantages
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
</div>
<div id="tab-1">
I'm the first
</div>
<div id="tab-2">
I'm number 2
</div>
<div id="tab-3">
I'm the last one.
</div>
</ul>
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
#my-tab ul.tabs{
display:block;
margin:0;
padding:0;
list-style-type:none;}
#my-tab ul.tabs > li{
display:block;
float:left;
margin-bottom:0;
padding:0;
width:17%}
#my-tab ul.tabs li a{
font-size:15px;
height:45px;
line-height:30px;
margin:0;
padding:7px 12px;
text-decoration:none;
width:auto;
font-weight:700;
color:#303030;}
.flex2 {
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;
padding: 0 10px;}
/* SVG ANIMATION bELLOW */
#my-tab ul.tabs li a.active path {
stroke:#6594F6;
fill:#6594F6;
stroke-dasharray:330;
opacity:1;
animation: animate 3s cubic-bezier(.27,.6,.8,.77);}
@keyframes animate {
0% {
opacity:0;
fill:none;
stroke-dashoffset:330;
}
30% {
opacity:1;
fill:none;
stroke-dashoffset:330;
}
90% {
fill: rgba(255,255,255,0);
}
100% {
opacity:1;
fill: rgba(255,255,255,1);
stroke-dashoffset:0;
}
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<div class="flex2">
<li><a href="#tab-1"><span class="tab1 text-link1">
Description
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
<li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
Livraison
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</a></li>
<li><a href="#tab-3"><span class="tab4">
Nos avantages
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
</div>
<div id="tab-1">
I'm the first
</div>
<div id="tab-2">
I'm number 2
</div>
<div id="tab-3">
I'm the last one.
</div>
</ul>
html css svg tabs
html css svg tabs
asked Nov 22 '18 at 1:57
MaxMax
286
asked Nov 22 '18 at 1:57
MaxMax
286
asked Nov 22 '18 at 1:57
MaxMax
286
asked Nov 22 '18 at 1:57
MaxMax
286
asked Nov 22 '18 at 1:57
MaxMax
286
286
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
-1
Just change the display property based on whether the tab has the .active class, like this:
<style>
#my-tab ul.tabs li a svg {
display: none;
}
#my-tab ul.tabs li a.active svg {
display: block;
height: auto;
}
</style>
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422868%2fhow-to-hide-show-an-animated-svg-depending-on-active-tab%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
Just change the display property based on whether the tab has the .active class, like this:
<style>
#my-tab ul.tabs li a svg {
display: none;
}
#my-tab ul.tabs li a.active svg {
display: block;
height: auto;
}
</style>
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
add a comment |
-1
Just change the display property based on whether the tab has the .active class, like this:
<style>
#my-tab ul.tabs li a svg {
display: none;
}
#my-tab ul.tabs li a.active svg {
display: block;
height: auto;
}
</style>
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
add a comment |
-1
-1
-1
Just change the display property based on whether the tab has the .active class, like this:
<style>
#my-tab ul.tabs li a svg {
display: none;
}
#my-tab ul.tabs li a.active svg {
display: block;
height: auto;
}
</style>
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
Just change the display property based on whether the tab has the .active class, like this:
<style>
#my-tab ul.tabs li a svg {
display: none;
}
#my-tab ul.tabs li a.active svg {
display: block;
height: auto;
}
</style>
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
edited Nov 22 '18 at 7:42
Jesse de Bruijne
2,50361427
2,50361427
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
answered Nov 22 '18 at 6:33
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.8k11037
12.8k11037
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422868%2fhow-to-hide-show-an-animated-svg-depending-on-active-tab%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
