How to hide/show an animated svg depending on active tab?
up vote
0
down vote
favorite
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 at 1:57
Max
285
add a comment |
up vote
0
down vote
favorite
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 at 1:57
Max
285
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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 at 1:57
Max
285
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 at 1:57
Max
285
asked Nov 22 at 1:57
Max
285
asked Nov 22 at 1:57
Max
285
asked Nov 22 at 1:57
Max
285
asked Nov 22 at 1:57
Max
285
285
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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 at 7:42
Jesse de Bruijne
2,44851325
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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 at 7:42
Jesse de Bruijne
2,44851325
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
add a comment |
up vote
0
down vote
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 at 7:42
Jesse de Bruijne
2,44851325
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
add a comment |
up vote
0
down vote
up vote
0
down vote
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 at 7:42
Jesse de Bruijne
2,44851325
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
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 at 7:42
Jesse de Bruijne
2,44851325
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
edited Nov 22 at 7:42
Jesse de Bruijne
2,44851325
edited Nov 22 at 7:42
Jesse de Bruijne
2,44851325
edited Nov 22 at 7:42
Jesse de Bruijne
2,44851325
2,44851325
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
answered Nov 22 at 6:33
AddWeb Solution Pvt Ltd
12.4k1735
12.4k1735
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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
