Issue
I'm trying to simply change the display property of a couple of elements when a link is hovered over, the elements default display in none. Here is the relevant code. I've removed the svg content as it takes up too much characters. Thankyou!
class LinkContainer {
animating = false;
alias;
colours;
link;
textelements;
shown;
constructor(alias, link, colours, textelements) {
this.alias = alias
this.colours = colours;
this.link = link;
textelements == null ? this.textelements = [] : this.textelements = Array.from(textelements)
console.log(this.textelements)
// this.textelements.forEach((element) => {
// element.Hide;
// });
}
toggletextelements(state) {
if (this.textelements.length == 0)
return
if (state) {
// let t1 = TimelineMax();
let transition = false;
linkcontainers.forEach((container) => {
// console.log(container.shown && container.alias != this.alias);
if (container.shown && container.alias != this.alias) {
const tween = KUTE.fromTo(
`.${this.alias} svg`,
{ path: `.${this.alias} svg` },
{ path: `.${container.alias} svg` },
).start();
this.shown = true;
} else {
// $(this.textelements[0]).show();
// console.log("🚀 ~ file: main.js ~ line 38 ~ LinkContainer ~ linkcontainers.forEach ~ textelements", $(this.textelements[0]));
this.textelements.forEach((textelement) => {
textelement.style.display = 'block';
// // t1.fromTo(textelement, 0.1, {
// // opacity: "0" }, {
// // opacity: "1"
// // });
});
}
});
}
}
}
linkcontainerobjects = Array.from(document.getElementsByClassName('link-container'));
// console.log(linkcontainerobjects);
linkcontainers = [];
linkcontainerobjects.forEach((container) => {
colours = container.getElementsByClassName('colour');
linkcontainers.push(
new LinkContainer(
container.dataset.alias,
container.getElementsByClassName('link')[0],
[colours[0], colours[1], colours[2], colours[3]],
document.getElementsByClassName(container.dataset.alias)
)
);
});
const tl = new TimelineMax();
const speed = 0.05;
const width = '40%'
linkcontainers.forEach((container) => {
container.link.addEventListener('mouseenter', (event) => {
if (!container.animating) {
container.animating = true;
container.colours.forEach((colour) => {
tl.fromTo(colour, speed, {
width: "0%"
}, {
width: width,
});
});
} container.animating = false;
container.toggletextelements('block');
});
container.link.addEventListener('mouseleave', (event) => {
if (!container.animating) {
container.animating = true;
container.colours.forEach((colour) => {
tl.fromTo(colour, speed, {
width: width
}, {
width: "0%"
});
});
} container.animating = false;
container.toggletextelements('none');
});
});
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
body {
background-color: rgb(15, 15, 15);
margin: 0;
display: grid;
flex-direction: row;
font-family: 'Inter', sans-serif;
color: white;
/* overflow-x: hidden;
overflow-y: hidden; */
grid-template: repeat(2, 1fr);
}
.links {
margin: 10% 0 0 5%;
display: flex;
flex-direction: column;
align-content: center;
width: 40%;
grid-column: 1 / 2;
}
.link {
color: white;
font-size: 4em;
text-decoration: none;
position: relative;
text-transform: uppercase;
z-index: 2;
}
.colour {
position: absolute;
width: 0%;
height: 75px;
transform: translateX(-10px) translateY(-1px);
z-index: 1;
}
.one {
background-color: #00DDFF;
}
.two {
background-color: #00FFAE;
}
.three {
background-color: #7bff00;
}
.four {
background-image: linear-gradient(to right, #00e1ff, #D0FF00);
/* width: 100%; */
}
.section {
height: 100%;
grid-column: 2 / 2;
display: none;
transform:
translateX(-3em)
translateY(-4.5em);
}
.section svg {
position: absolute;
display: inherit;
transform:
scale(120%)
rotate(-90deg)
translateX(-1em)
translateY(-37em);
}
.filler {
background-color: #0a97ff;
position: absolute;
display: inherit;
width: 100%;
height: 152.4%;
transform:
translateX(5em);
}
.section p {
position: absolute;
z-index: 3;
font-size: 1.6em;
display: inherit;
width: 20em;
text-align: right;
transform:
translateX(2em)
translateY(15em);
}
.section h {
position: absolute;
z-index: 3;
display: inherit;
font-size: 5em;
width: 29%;
text-align: right;
transform:
translateX(4em)
translateY(3em);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/kute.js@2.1.2/dist/kute.min.js
"></script>
<div class="links">
<div class="link-container" data-alias="home" id="home">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">home</a>
</div>
<div class="link-container" data-alias="projects">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">projects</a>
</div>
<div class="link-container" data-alias="about">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">about</a>
</div>
<div class="link-container" data-alias="training">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">training</a>
</div>
<div class="link-container" data-alias="experiments">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">experiments</a>
</div>
<div class="link-container" data-alias="contact">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">contact</a>
</div>
</div>
<div class="section">
<div class="home">
<svg id="visual" class="content home"
viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<div class="filler home"></div>
<h class="content projects" class="content home">
Lorem
</h class="content projects">
<p class="content home">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="projects">
<svg class="content projects" id="visual" viewBox="0 0 900 600" width="900" height="600" class="content projects" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h class="content projects">
Lorem
</h>
<p class="content projects">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="about">
<svg class="content about" id="outer" viewBox="0 0 1000 800" width="1000" height="900" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<rect x="0" y="0" width="1000" height="800" fill="#0f0f0f"></rect>
<g transform="translate(534.7368600969783 383.1406775770206)">
<path
d=""
fill="#00fff0"></path>
</g>
</svg>
<svg class="content projects" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h class="content about">
Lorem
</h>
<p class="content about">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="training">
<svg class="content training" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h class="content training">
Lorem
</h>
<p class="content training">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="experiments">
<svg class="content experiments" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h class="content experimentsw">
Lorem
</h>
<p class="content experiments">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="contact">
<svg class="content contact" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h class="content contact">
Lorem
</h>
<p class="content contact">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Solution
I inspected your codes, first of all I found some problems (in my opinion) in the html
code. We don't have h
tag, So I changed all of them to h1
. Also in some cases you inserted class
attribute twice! or in the closing tag! So I fixed all of them in my final code.
Next I inspect the JavaScript code. In a line you used new TimelineMax();
. But you did not insert the code of that. So I commented the codes related to it in my final solution (maybe codes related to animating
).
Finally the main problem comes from toggletextelements
method in the LinkContainer
class. In the else
part of if
, where you want to change the style, there are two problems:
- problem-1: You did not use the
state
parameter in the code, and set "block" string instead. In that case alwaysdisplay:block
applies, But you wantdisplay:none
whenmouseleave
occurs. So I changed that. - problem-2: In your style-sheet you set
display: none;
for.section
class that is the parent of all<div>
tags that you want to applydisplay:block
in your js code. that is the reason your changing style does not work. So I added.section > div { display: none; }
to the style-sheet and changed the js code inelse
part that appliesdisplay:block
to both<div>s
tags and their parent (.section class) with the help ofclosest('.section')
js method
this is my final code:
class LinkContainer {
animating = false;
alias;
colours;
link;
textelements;
shown;
constructor(alias, link, colours, textelements) {
this.alias = alias
this.colours = colours;
this.link = link;
textelements == null ? this.textelements = [] : this.textelements = Array.from(textelements)
// console.log(this.textelements)
// this.textelements.forEach((element) => {
// element.Hide;
// });
}
toggletextelements(state) {
// console.log("hovered");
if (this.textelements.length == 0) {
return;
}
if (state) {
// let t1 = TimelineMax();
let transition = false;
linkcontainers.forEach((container) => {
// console.log(container.shown && container.alias != this.alias);
if (container.shown && container.alias != this.alias) {
const tween = KUTE.fromTo(
`.${this.alias} svg`,
{ path: `.${this.alias} svg` },
{ path: `.${container.alias} svg` },
).start();
this.shown = true;
} else {
// $(this.textelements[0]).show();
// console.log("🚀 ~ file: main.js ~ line 38 ~ LinkContainer ~ linkcontainers.forEach ~ textelements", $(this.textelements[0]));
this.textelements.forEach((textelement) => {
textelement.style.display = state;
textelement.closest('.section').style.display = state;
// // t1.fromTo(textelement, 0.1, {
// // opacity: "0" }, {
// // opacity: "1"
// // });
});
}
});
}
}
}
linkcontainerobjects = Array.from(document.getElementsByClassName('link-container'));
// console.log(linkcontainerobjects);
linkcontainers = [];
linkcontainerobjects.forEach((container) => {
console.log(container.dataset.alias);
let colours = container.getElementsByClassName('colour');
linkcontainers.push(
new LinkContainer(
container.dataset.alias,
container.getElementsByClassName('link')[0],
[colours[0], colours[1], colours[2], colours[3]],
document.getElementsByClassName(container.dataset.alias)
)
);
});
// const tl = new TimelineMax();
const speed = 0.05;
const width = '40%'
console.log(linkcontainers);
linkcontainers.forEach((container) => {
container.link.addEventListener('mouseenter', (event) => {
// if (!container.animating) {
// container.animating = true;
// container.colours.forEach((colour) => {
// tl.fromTo(colour, speed, {
// width: "0%"
// }, {
// width: width,
// });
// });
// } container.animating = false;
container.toggletextelements('block');
});
container.link.addEventListener('mouseleave', (event) => {
// if (!container.animating) {
// container.animating = true;
// container.colours.forEach((colour) => {
// tl.fromTo(colour, speed, {
// width: width
// }, {
// width: "0%"
// });
// });
// } container.animating = false;
container.toggletextelements('none');
});
});
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
body {
background-color: rgb(15, 15, 15);
margin: 0;
display: grid;
flex-direction: row;
font-family: 'Inter', sans-serif;
color: white;
/* overflow-x: hidden;
overflow-y: hidden; */
grid-template: repeat(2, 1fr);
}
.links {
margin: 10% 0 0 5%;
display: flex;
flex-direction: column;
align-content: center;
width: 40%;
grid-column: 1 / 2;
}
.link {
color: white;
font-size: 4em;
text-decoration: none;
position: relative;
text-transform: uppercase;
z-index: 2;
}
.colour {
position: absolute;
width: 0%;
height: 75px;
transform: translateX(-10px) translateY(-1px);
z-index: 1;
}
.one {
background-color: #00DDFF;
}
.two {
background-color: #00FFAE;
}
.three {
background-color: #7bff00;
}
.four {
background-image: linear-gradient(to right, #00e1ff, #D0FF00);
/* width: 100%; */
}
.section {
height: 100%;
grid-column: 2 / 2;
display: none;
transform:
translateX(-3em)
translateY(-4.5em);
}
.section > div {
display: none;
}
.section svg {
position: absolute;
display: inherit;
transform:
scale(120%)
rotate(-90deg)
translateX(-1em)
translateY(-37em);
}
.filler {
background-color: #0a97ff;
position: absolute;
display: inherit;
width: 100%;
height: 152.4%;
transform:
translateX(5em);
}
.section p {
position: absolute;
z-index: 3;
font-size: 1.6em;
display: inherit;
width: 20em;
text-align: right;
transform:
translateX(2em)
translateY(15em);
}
.section h1 {
position: absolute;
z-index: 3;
display: inherit;
font-size: 5em;
width: 29%;
text-align: right;
transform:
translateX(4em)
translateY(3em);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="links">
<div class="link-container" data-alias="home" id="home">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">home</a>
</div>
<div class="link-container" data-alias="projects">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">projects</a>
</div>
<div class="link-container" data-alias="about">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">about</a>
</div>
<div class="link-container" data-alias="training">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">training</a>
</div>
<div class="link-container" data-alias="experiments">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">experiments</a>
</div>
<div class="link-container" data-alias="contact">
<div class="colour one"></div>
<div class="colour two"></div>
<div class="colour three"></div>
<div class="colour four"></div>
<a class="link" href="#">contact</a>
</div>
</div>
<div class="section">
<div class="home">
<svg id="visual" class="content home"
viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<div class="filler home"></div>
<h1 class="content projects home">
Home
</h1>
<p class="content home">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="projects">
<svg class="content projects" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h1 class="content projects">
Projects
</h1>
<p class="content projects">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="about">
<svg class="content about" id="outer" viewBox="0 0 1000 800" width="1000" height="900" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<rect x="0" y="0" width="1000" height="800" fill="#0f0f0f"></rect>
<g transform="translate(534.7368600969783 383.1406775770206)">
<path
d=""
fill="#00fff0"></path>
</g>
</svg>
<svg class="content projects" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h1 class="content about">
About
</h1>
<p class="content about">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="training">
<svg class="content training" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h1 class="content training">
Lorem
</h1>
<p class="content training">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="experiments">
<svg class="content experiments" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h1 class="content experimentsw">
Lorem
</h1>
<p class="content experiments">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
<div class="contact">
<svg class="content contact" id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="" fill="#0a97ff"></path></svg>
<h1 class="content contact">
Lorem
</h1>
<p class="content contact">
Pariatur proident commodo adipisicing cillum quis. Officia do do ipsum laborum commodo et nulla consequat
culpa elit aute. Elit sit eiusmod qui amet amet fugiat est. Consectetur deserunt incididunt excepteur labore
ullamco ut irure dolor. Ipsum laborum irure fugiat aute exercitation incididunt nostrud dolor proident
laborum culpa. Deserunt Lorem ex duis ex do officia cupidatat id duis sit. Eu dolor non ad est dolore.
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/kute.js@2.1.2/dist/kute.min.js
"></script>
<script src="codes.js"></script>
</body>
</html>
That does not show and hide contents smoothly. Maybe because I disabled your animations or maybe you need extra styles. But that solves the main problem (applying changing styles in js).
Answered By - hamid-davodi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.