Develop Reference

In a Web Component How to show tooltip & hide tooltip when clicking outside or when another tooltip clicked

I have this Web Component that has cards with tooltips.
I am trying to accomplish 3 things. I am trying use Vanilla Javascript vs jQuery or other libraries.
Show when a button is clicked then hide if button is clicked again. This is currently working.
Hide when clicked outside of button. I tried selecting the document then comparing clicked element with the element I want to target, having trouble with targeting.
Only show 1 tooltip at a time so if 1 is open then you click another only the second one shows. Not sure how to approach this.
Here is what I have so far.
class BuildABox extends HTMLElement {
constructor() {
super();
this.querySelectorAll('[data-tooltip]').forEach((button) =>
button.addEventListener('click', this.toggleTooltip.bind(this))
);
}
toggleTooltip(e) {
e.preventDefault();
const toolTip = e.currentTarget.lastChild.previousSibling;
toolTip.classList.toggle('tw-invisible');
}
}
customElements.define('build-a-box', BuildABox);
<button id="info-btn" aria-label="Information" type="button" data-info="{{ block.settings.product_description }}">
<div data-tooltip="tooltip" class="tw-w-12">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-12 h-12"
>
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
</svg>
{% comment %} This is tooltip to hide/show {% endcomment %}
<div
id="tooltip"
class="tw-invisible z-50 tw-absolute tw-top-24 tw-max-w-[300px] tw-bg-blue-400 tw-text-white tw-border-graphite tw-border-2 tw-overflow-auto tw-rounded-2xl tw-p-4 tw-mt-1"
>
<p>{{ block.settings.product_description }}</p>
</div>
</div>
</button>

You don't want to create dependencies, thus keep as much of the logic inside the Web Component
Using shadowDOM here because it keeps the Web Component small
and you can style with global CSS using ::part
Key concept: <my-button tooltip>
The tooltip attribute determines of it is visible, or not
I whacked in additional styling to show more styling options.
For deep-deep-details on <slot> and ::slotted read: ::slotted CSS selector for nested children in shadowDOM slot
same code in: https://jsfiddle.net/WebComponents/xg3ns6od/
customElements.define('my-button', class extends HTMLElement {
constructor() {
super().attachShadow({mode:"open"}).innerHTML =
`<style>`+
`button{ width:120px; cursor:pointer } ::slotted(div){ pointer-events:none }` +
`[name="tooltip"]::slotted(div) { color:blue; font-size: 1.2rem }`+
`[name="label"]::slotted(div) { font-size:1em;font-weight:bold }`+
`:host([tooltip]) svg { fill:green!important } `+
`:host(:hover:not([tooltip])) path{ scale:1.2; transform-origin: center }` +
`:host(:not([tooltip])) [name="tooltip"]::slotted(div) { visibility:hidden } `+
`</style>`+
`<button part="button"><svg part="icon" viewBox="0 0 2400 2400">`+
`<path fill-rule="evenodd" d="m225 1200c0-539 437-975 975-975s975 437 975 975-437 975-975 975-975-436-975-975zm871-144c115-57 244 46 213 171l-71 284 4-2a75 75 90 0167 134l-4 2c-115 57-244-46-213-171l71-284-4 2a75 75 90 11-67-134l4-2zm104-156a75 75 90 100-150 75 75 90 000 150z"/>`+
`</svg><slot name="tooltip"></slot>`+
`<slot name="label"></slot></button>`;
}
connectedCallback(){
this.onclick = () => this.tooltip = !this.tooltip;
this.globalListener = document.addEventListener("click",
(evt) => this.tooltip = evt.target == this )
}
get tooltip() { return this.hasAttribute("tooltip") }
set tooltip(val){ this.toggleAttribute("tooltip",val) }
disconnectedCallback(){
document.removeEventListener("click", this.globalListener);
}
});
/* style parts IN shadowDOM */
my-button::part(icon){ fill:red }
/* style lightDOM! */
my-button[tooltip] [slot="tooltip"] { background:lightgreen }
<my-button>
<div slot="tooltip">Tooltip 1</div>
<div slot="label">Product Description</div>
</my-button>
<my-button tooltip>
<div slot="tooltip">Tooltip 2</div>
<div slot="label">Product Description</div>
</my-button>
<my-button>
<div slot="tooltip">Tooltip 3</div>
<div slot="label">Product Description</div>
</my-button>

To expound upon my prior comments which I deleted; I updated your code slightly and added some CSS to show it clearly here. I have a data element to choose a target and then use that in the click handler.
class BuildABox extends HTMLElement {
constructor() {
super();
this.querySelectorAll('[data-tooltip-target]').forEach((button) => {
button.addEventListener('click', this.toggleTooltip.bind(this))
});
}
toggleTooltip(e) {
e.preventDefault();
const mytarget = e.currentTarget.dataset.tooltipTarget;
const toolTip = e.currentTarget.querySelector(`[data-tooltip="${mytarget}"]`);
toolTip.classList.toggle('tw-invisible');
}
}
customElements.define('build-a-box', BuildABox);
.tw-invisible {
display: none;
}
.tooltip-text {
color: blue;
font-size: 1.5rem;
}
<build-a-box>
<button id="info-btn" aria-label="Information" type="button" data-info="{{ block.settings.product_description }}" data-tooltip-target="mine">
<div class="tw-w-12">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-12 h-12"
>
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
</svg>
<tool-tip data-tooltip="mine" class="tw-invisible">
<span class="tooltip-text">This is tooltip to hide/show</span>
</tool-tip>
<div class="z-50 tw-absolute tw-top-24 tw-max-w-[300px] tw-bg-blue-400 tw-text-white tw-border-graphite tw-border-2 tw-overflow-auto tw-rounded-2xl tw-p-4 tw-mt-1">
<p>{{ block.settings.product_description }}</p>
</div>
</div>
</button>
</build-a-box>

Switch Logo color in Dark Mode issue

I have a black color logo for my portfolio and i would like to switch it white when Dark Mode : https://www.paulinerouger.com/
I have tried:
Using CSS Variables
<img class="nav_logo" src="assets/img/PR_logo.png" alt="original logo" />
body {
--nav_logo: url(PR_logo.png) no-repeat;
}
body[data-theme="dark"] {
--nav_logo: url(PR_logo_white.png) no-repeat;
}
.nav_logo {
background: var(--nav_logo);
}
Using SVG
<img class="nav_logo" src="assets/img/PR_logo.svg" id="svg" alt="PR Logo">
.nav_logo {
fill: currentColor;
}
Unfortunately none of the above has worked.
Any suggestion?

change stroke="#000" in your svg to stroke="currentColor"
body.dark-theme .nav__logo{
color: #FFFFFF;
}

If you are considering a JS-based solution, you can use the approach I developed below. Clicking the toggle button changes both the src attribute of the <img> element and the background-color style of the <body> element.
let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');
let darkImageURL = "https://cdn-icons-png.flaticon.com/512/196/196685.png";
let lightImageURL = "https://cdn-icons-png.flaticon.com/512/169/169367.png";
button.addEventListener('click', function(event) {
if(this.innerHTML === "Dark") {
document.body.style.background = "black";
this.innerHTML = "Light";
logo.src = darkImageURL;
}
else {
document.body.style.background = "white";
this.innerHTML = "Dark";
logo.src = lightImageURL;
}
});
<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100"/>
</body>

You can use css variables with content property for img
document.getElementById('toggleButton').addEventListener('click', function(event) {
if (this.innerHTML === "Dark") {
document.body.dataset.theme = "dark";
this.innerHTML = "Light";
} else {
document.body.dataset.theme = "light";
this.innerHTML = "Dark";
}
});
body {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/169/169367.png');
}
body[data-theme="dark"] {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/196/196685.png');
}
.nav_logo {
content: var(--nav_logo);
}
<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100" />
</body>

Svg is just perfect – but wont't work within an <img> element.
You might consider these steps:
optimize your logo svg to inherit colors in a more consistent way
reduce your logo to fixed path elements i.e convert stroked elemnts like the inside bar/pipe to a solid shape/path to avoid accidental strike-width shifts
use an svg <use> concept – providing an <img> like usage i.e providing external svg files as reusable assets.
Example1
stripping hard coded svg properties for better global css styling:
function toggleDarkmode(){
document.body.classList.toggle('darkmode')
}
* {
box-sizing: border-box;
}
body {
color: #000;
transition: 0.3s;
}
.darkmode {
color: #fff;
background-color: #000;
}
/* just example css – not essential */
.nav__logo .logo {
display: inline-block;
width: 10em;
}
.svgAsset {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
<div class="nav__logo">
<p><button type="button" onclick="toggleDarkmode()">toggleDarkmode</button></p>
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375" fill="currentColor">
<path d="M 187.382812 337.265625 C 148.582031 337.265625 112.046875 322.164062 84.628906 294.691406 C 57.152344 267.273438 42.050781 230.738281 42.050781 191.933594 C 42.050781 153.132812 57.152344 116.597656 84.628906 89.179688 C 112.046875 61.703125 148.582031 46.601562 187.382812 46.601562 C 226.1875 46.601562 262.722656 61.703125 290.140625 89.179688 C 317.613281 116.652344 332.714844 153.132812 332.714844 191.933594 C 332.714844 230.738281 317.613281 267.273438 290.140625 294.691406 C 262.722656 322.164062 226.1875 337.265625 187.382812 337.265625 Z M 187.382812 55.316406 C 150.90625 55.316406 116.574219 69.546875 90.785156 95.335938 C 64.996094 121.125 50.765625 155.457031 50.765625 191.933594 C 50.765625 228.414062 64.996094 262.742188 90.785156 288.53125 C 116.574219 314.324219 150.90625 328.554688 187.382812 328.554688 C 223.863281 328.554688 258.191406 314.324219 283.980469 288.53125 C 309.773438 262.742188 324.003906 228.414062 324.003906 191.933594 C 324.003906 155.457031 309.773438 121.125 283.980469 95.335938 C 258.191406 69.546875 223.863281 55.316406 187.382812 55.316406 Z M 187.382812 55.316406"></path>
<path d="M 35.097656 -71.835938 L 8.824219 -71.835938 L 8.824219 0 L 19.292969 0 L 19.292969 -23.910156 L 35.097656 -23.910156 C 50.59375 -23.910156 58.390625 -35.816406 58.390625 -47.820312 C 58.390625 -59.828125 50.59375 -71.835938 35.097656 -71.835938 Z M 35.097656 -34.171875 L 19.292969 -34.171875 L 19.292969 -61.367188 L 35.097656 -61.367188 C 43.820312 -61.367188 48.128906 -54.59375 48.128906 -47.71875 C 48.128906 -40.945312 43.820312 -34.171875 35.097656 -34.171875 Z M 35.097656 -34.171875" transform="translate(97.282 227.676)"></path>
<path d="M 34.996094 -36.429688 L 22.886719 -36.429688 L 22.886719 -31.503906 L 49.054688 0 L 62.496094 0 L 39.816406 -26.988281 C 52.132812 -29.144531 58.390625 -38.792969 58.390625 -48.949219 C 58.390625 -60.34375 50.59375 -72.757812 34.996094 -72.757812 L 8.824219 -72.757812 L 8.824219 0 L 19.085938 0 L 19.085938 -62.292969 L 34.996094 -62.292969 C 43.71875 -62.292969 48.027344 -55.109375 48.027344 -48.949219 C 48.027344 -42.691406 43.71875 -36.429688 34.996094 -36.429688 Z M 34.996094 -36.429688" transform="translate(216.811 227.676)"></path>
<path transform="matrix(0 -9.7441 10.11111 0 187.491 250.21)" d="M -0.0000988013 0.0000885473 L 11.930592 0.0000885473" stroke="currentColor" stroke-width="1"></path>
</svg>
</div>
all path related fill attributes are removed (resulting in a default fill="#000" / black)
svg parent element gets a fill="currentColor" – inherited to all children
the stroke based bar/pipe element gets a stroke="currentColor" rule
Example2
<svg><use href="#..."></svg> also works fine with external files
The next example takes an inlined svg as source but will also work fine with external file references like this (provided, these external files are available on the same domain):
<svg>
<use href="logo.svg#logo-symbol">
</svg>
function toggleDarkmode(){
document.body.classList.toggle('darkmode')
}
*{
box-sizing:border-box;
}
body {
color: #000;
transition: 0.3s;
}
.darkmode {
color: #fff;
background-color: #000;
}
/* just example css – not essential */
.nav__logo .logo {
display: inline-block;
width: 10em;
}
.svgAsset{
position:absolute;
width:0;
height:0;
overflow:hidden;
}
<div class="nav__logo">
<p><button type="button" onclick="toggleDarkmode()">toggleDarkmode</button></p>
<svg class="logo logo-cropped" viewBox="0 0 100 100" >
<use href="#logo-smaller" />
</svg>
</div>
<svg class="svgAsset" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true">
<symbol id="logo-smaller" viewBox="0 0 100 100" fill="currentColor">
<path id="circle" d="M50 100c-27.6 0-50-22.4-50-50c0-27.6 22.4-50 50-50c27.6 0 50 22.4 50 50c0 27.6-22.4 50-50 50zm0-97c-25.9 0-47 21.1-47 47c0 25.9 21.1 47 47 47c25.9 0 47-21.1 47-47c0-25.9-21.1-47-47-47z" />
<path id="P" d="M31.1 37.6l-9 0l0 24.7l3.6 0l0-8.2l5.4 0c5.3 0 8-4.1 8-8.2c0-4.2-2.7-8.3-8-8.3zm0 12.9l-5.4 0l0-9.4l5.4 0c3 0 4.5 2.3 4.5 4.7c0 2.4-1.5 4.7-4.5 4.7z" />
<path id="R" d="M72.2 49.8l-4.2 0l0 1.7l9 10.8l4.6 0l-7.8-9.3c4.2-0.7 6.4-4.1 6.4-7.6c0-3.9-2.7-8.2-8-8.2l-9 0l0 25l3.5 0l0-21.3l5.5 0c3 0 4.5 2.5 4.5 4.6c-0.1 2.1-1.5 4.3-4.5 4.3z" />
<path id="Pipe" d="M51.4 70l-2.8 0l0-40l2.8 0l0 40z" />
</symbol>
</svg>
In the above example, strokes are converted to solid paths – thus you don’t have to bother about styling stroke-colors and fill colors.
»Silverbullet« currentColor?
svg's currentColor value is handy to color svg elements according to their parent elements' (text) color.
E.g. perfectly suited for an inline (icon font like) element behavior.
But you won't see any effect applying fill color values.
Nothing wrong with the fill property
Since fill is reserved for svg elements – you don't have to worry about accidentally overridden styles.
So it might still be a better choice for some elements.

Changing rec location and width programatically

I've the below code, which is drawing a rec in a svg element:
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
I want to be able "prpgramatically" to:
Shift the location of the rec by changing the value of the from field
Chang the width of the rec by changing the value of the to field

const svgRect = document.querySelector('svg rect')
function xStart(XS){
svgRect.setAttribute('x',XS)
}
function rWidth(RW){
svgRect.setAttribute('width',RW)
}
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input onchange="xStart(this.value)" type="number" name="from">
<label for="to">To:</label>
<input onchange="rWidth(this.value)" type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
For changing width, you can add even listeners to mouse position and situations, below sample code:
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "octicon octicon-star");
// svg.setAttribute("viewBox", "0 0 14 16");
svg.setAttribute("version", "1.1");
svg.setAttribute("width", 240);
svg.setAttribute("height", 160);
svg.setAttribute("aria-hidden", "true");
let barThickness = 20
let orders = [100, 152];
//orders.forEach((element, index, array) => console.log('a[' + index + '] = ' + element) )
orders.forEach(function(element, index, array) {
console.log('a[' + index + '] = ' + element)
let r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("x", 0);
r.setAttribute("y",(barThickness+10)*index+0);
r.setAttribute("width", element);
r.setAttribute("height", barThickness);
r.setAttribute("fill","black");
let isDrawing = false;
let x = element
let mousePosition = 0
r.addEventListener('mouseenter', e => {
e.path[0].setAttribute("fill","red")
});
r.addEventListener('mouseleave', e => {
e.path[0].setAttribute("fill","black")
if (isDrawing === true) {
isDrawing = false;
}
});
r.addEventListener('mousedown', e => {
isDrawing = true;
});
r.addEventListener('mousemove', e => {
if (isDrawing === true) {
console.log(e.offsetX)
if(e.offsetX>mousePosition) {
x++
} else if(e.offsetX < mousePosition){
x--
}
mousePosition = e.offsetX
r.setAttribute("width", x)
}
});
r.addEventListener('mouseup', e => {
if (isDrawing === true) {
isDrawing = false;
}
});
svg.appendChild(r);
document.body.appendChild(svg)
} )

var startX = 100;
var startY = 100;
function init() {
Snap("#rect").drag(dragMove, dragStart, dragEnd);
}
function dragStart(x, y, evt) {
// figure out where the circle currently is
startX = parseInt(Snap("#rect").attr("x"), 10);
startY = parseInt(Snap("#rect").attr("y"), 0);
}
function dragMove(dx, dy, x, y, evt) {
Snap("#rect").attr({
x: (startX + dx),
y: (startY + dy)
});
}
function dragEnd(evt) {
// no action required
}
.container {
display: flex;
align-items: center;
height: 1.3em;
position:relative;
}
svg {
position: absolute;
top: 0;
left:420px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<body onload="init()">
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="400" height="400">
<rect draggable="true" id='rect' x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
</div>
</body>

Coloring svg using javascript when clicking an arrow to go to the next slide

I have to color SVG when I press red square to change slide, can someone help me?
I can color SVG when I hit, but when I click the red square to go to the next slide I have no idea how to change the color of the SVG so that it matches colored white.
So the final result should be that when I click on the red square the slide changes, SVG turns white together with the pink background
// Script written by #hamzadhamiya for #bloggerever.
// http://bloggerever.com
$(function () {
$.FindContainer = function () {
$('.tab-content>div').each(function findcontent() {
var newindex = $('.activetab').index();
var newheight = $('.activetab').height();
$('.tab-content').animate({
'height': newheight+20
}, 100);
var otherindex = $(this).index();
var substractindex = otherindex - newindex;
var currentwidth = $('.multipletab').width();
var newpositions = substractindex * currentwidth;
$(this).animate({
'left': newpositions
});
});
};
$.FindId = function () {
$('.tab-content>div').each(function () {
if ($(this).attr('id') == $('.active').attr('id')) {
$('.tab-content>div').removeClass('activetab');
$(this).addClass('activetab');
}
});
};
$('.tab-buttons>span').first().addClass('active');
$('.tab-content>div').each(function () {
var activeid = $('.active').attr('id');
if ($(this).attr('id') == activeid) {
$(this).addClass('activetab');
}
var currentheight = $('.activetab').height();
var currentwidth = $('.multipletab').width();
var currentindex = $(this).index();
var currentposition = currentindex * currentwidth;
$(this).css({
'left': currentposition,
'width': currentwidth - 40,
'padding': '10px 20px'
});
$(this).attr('data-position', currentposition);
$('.tab-content').css('height', currentheight+20);
});
$('.tab-buttons>span').click(function () {
$('.tab-buttons>span').removeClass('active');
$(this).addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
});
$('.next').click(function () {
var activetabindex = $('.activetab').index() + 1;
var containers = $('.tab-content>div').length;
if (containers == activetabindex) {
$('.tab-buttons>span').removeClass('active');
$('.tab-buttons>span').first().addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
} else {
var currentopen = $('.active').next();
$('.active').removeClass('active');
currentopen.addClass('active');
$.FindId();
$.FindContainer();
}
});
$('.prev').click(function(){
var activetabindex = $('.activetab').index();
if (activetabindex == 0) {
$('.tab-buttons>span').removeClass('active');
$('.tab-buttons>span').last().addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
} else {
var currentopen = $('.active').prev();
$('.active').removeClass('active');
currentopen.addClass('active');
$.FindId();
$.FindContainer();
}
});
});
//script che colora il tabs tessuti
document.getElementById("linkTessuti1").classList.add("colorebianco")
function onclickWhite1() {
var color1=document.getElementById("linkTessuti1");
color1.classList.add("colorebianco");
var rimuovicolor2=document.getElementById("linkTessuti2");
rimuovicolor2.classList.remove("colorebianco");
var rimuovicolor3=document.getElementById("linkTessuti3");
rimuovicolor3.classList.remove("colorebianco");
}
function onclickWhite2() {
var color2=document.getElementById("linkTessuti2");
color2.classList.add("colorebianco");
var rimuovicolor1=document.getElementById("linkTessuti1");
rimuovicolor1.classList.remove("colorebianco");
var rimuovicolor3=document.getElementById("linkTessuti3");
rimuovicolor3.classList.remove("colorebianco");
}
function onclickWhite3() {
var color3=document.getElementById("linkTessuti3");
color3.classList.add("colorebianco");
var rimuovicolor1=document.getElementById("linkTessuti1");
rimuovicolor1.classList.remove("colorebianco");
var rimuovicolor2=document.getElementById("linkTessuti2");
rimuovicolor2.classList.remove("colorebianco");
}
.multipletab{
width:50%;
margin:0 auto;
background:blue;
overflow:hidden;
position:relative;
}
.tab-buttons{
display:inline-block;
width:100%;
border-bottom:2px solid #666;
}
.tab-buttons>span{
display:block;
text-align: center;
float:left;
cursor:pointer;
width: 20%;
background:green;
}
.tab-buttons>span.active{
background:pink;
position:relative;
}
.tab-content{
position:relative;
}
.tab-content>div{
position:absolute;
background-color:yellow;
}
.tab-nav>span{
position:absolute;
top:50%;
cursor:pointer;
display:block;
height:35px;
width:35px;
}
.tab-nav>span.next{
right:10px;
background-color: red;
}
.tab-nav>span.prev{
left:10px;
background-color: red;
}
.colorebianco {
fill: #ffffff!important;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Sliding Multiple Tabs with Arrow navigation</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=PT+Sans'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='multipletab'>
<div class='tab-buttons'>
<span id='content1'>
<svg onclick="onclickWhite1()" id="linkTessuti1" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content2'>
<svg onclick="onclickWhite2()" id="linkTessuti2" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content3'>
<svg onclick="onclickWhite3()" id="linkTessuti3" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content4'>
<svg onclick="onclickWhite4()" id="linkTessuti4" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content5'>
<svg onclick="onclickWhite5()" id="linkTessuti5" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<!--add more button right after it with same id attribute of that container. Make sure to use span tag.-->
</div>
<div class='tab-content'>
<div id='content1'>
THE CONTENT OF FIRST TAB.THE CONTENT OF FIRST TAB.THE
</div>
<div id='content2'>
This is Second Containter.This is Second Containter.This
</div>
<div id='content3'>
THE CONTENT OF 3RD CONTAINER GOES HERETHE CONTENT OF
</div>
<div id='content4'>
THE CONTENT OF 4RD CONTAINER GOES HERETHE CONTENT OF
</div>
<div id='content5'>
THE CONTENT OF 5RD CONTAINER GOES HERETHE CONTENT OF
</div>
<!--add more container right after it with same id attribute of that button. Make sure to use div tag.-->
</div>
<div class='tab-nav'>
<span class='next'></span>
<span class='prev'></span>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

You don't need to specifically set the circle to white (class .colorebianco). Instead just add a CSS rule that makes the circle white if it is in the .active span.
.tab-buttons>span.active path {
fill: #ffffff!important;
}
Then everything works automatically for you.

Tweak SVG viewBox behaviour via javascript

I am using vanilla javascript to navigate the pages of a comic book. However, I need to setup a condition that checks if the points in the current polygon intersects with the points in the next polygon. If true, I want the viewBox to animate from the current points to the next points, if false let nothing happen (use the default fade transition).
Here is a section of my code
var DELAY = 400;
function nextArea() {
if (isFirstPage() || areaIndex >= areas.length - 1) {
changePage(true);
changeArea();
} else {
fade();
areaIndex++;
setTimeout(changeArea, DELAY);
}
}
function prevArea() {
if (isLastPage() || areaIndex <= 0) {
changePage(false);
changeArea();
} else {
fade();
areaIndex--;
setTimeout(changeArea, DELAY);
}
}
function changeArea() {
if (isFirstPage() || isLastPage()) {
return;
}
var activeArea = areas[areaIndex];
var points = activeArea.getAttribute('points').split(' ');
var xy1 = points[0].split(',');
var xy2 = points[1].split(',');
var xy3 = points[2].split(',');
var box = [xy1[0], xy1[1], xy2[0] - xy1[0], xy3[1] - xy2[1]];
activePage.classList.remove('fade');
activePage.setAttribute('viewBox', box.join(' '));
activeRect = rects[pageIndex - 1];
activeRect.setAttribute('x', xy1[0]);
activeRect.setAttribute('y', xy1[1]);
}
My code repository is here: https://github.com/cnario/svg-carousel
Here is what I have thus far: https://cnario.github.io/svg-carousel/
Here is how I expect it to act: https://read.marvel.com/#book/41323

I suppose this is what you may need: a way to transition the viewBox from one value to another so that every time you have only one part of the svg in the viewBox.
let BB = {};
BB.tomato = tomato.getBBox();
BB.skyblue = skyblue.getBBox();
BB.gold = gold.getBBox();
let radios = document.querySelectorAll("#controls input");
radios.forEach(r =>{
let color = r.dataset.color;
let bb = BB[color];
r.addEventListener("change",()=>{
svg.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
svg.style.height = `${bb.height * 300 / bb.width}px`;
})
})
svg {
width: 300px;
border: 1px solid;
height: 600px;
transition: height 1s;
}
<p id="controls">
<label>tomato: <input type="radio" name="selector" data-color="tomato" /></label>
<label>skyblue: <input type="radio" name="selector" data-color="skyblue" /></label>
<label>gold: <input type="radio" name="selector" data-color="gold" /></label>
</p>
<svg id="svg" viewBox="0 0 100 200">
<g id="tomato">
<circle cx="35" cy="70" r="25" fill="tomato" />
</g>
<g id="skyblue">
<ellipse cx="75" cy="160" rx="15" ry="35" fill="skyblue" />
</g>
<g id="gold">
<polygon fill="gold" points="75,15 60,30 90,30" />
</g>
</svg>