We Keep Coding

create a progress bar value from html data

I'm trying to create a progress circle, and get the progress value based on HTML data (data-start and data progress), but there is an error.
The code works fine on one element, but the problem occurs when creating a loop for all elements.
Uncaught Type Error: Cannot read properties of undefined (reading 'start')"
let progressBar = document.getElementsByClassName(".circular-progress");
let valueContainer = document.getElementsByClassName(".value-container");
let progressValue = valueContainer.dataset.start;
let progressEndValue = valueContainer.dataset.progress;
var twoSum = function() {
for (var i = 0; i < progressValue.length; i++) {
for (var j = 0; j < progressEndValue.length; j++) {
let progress = setInterval(() => {
i++;
valueContainer.textContent = `${[i]}%`;
progressBar.style.background = `conic-gradient(
#4d5bf9 ${[i] * 3.6}deg,
#cadcff ${[i] * 3.6}deg
)`;
if (progressValue == progressEndValue) {
clearInterval(progress);
}
}, 30);
}
}
};
.skill .container {
display: grid;
align-items: center;
}
.skill-grid {
display: grid;
grid-template-columns: 190px 190px;
grid-template-rows: 190px 190px;
justify-content: center;
column-gap: 2.5rem;
row-gap: 100px;
margin-right: 2rem;
position: relative;
}
.skill-card {
background-color: var(--white);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 1 1 6rem;
/* padding: 3rem 4rem; */
border-radius: 0.5rem;
transition: transform ease-in-out 0.3s;
}
.skill-card p {
font-size: 1rem;
font-weight: 600;
text-align: center;
padding-top: 10px;
}
.circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
display: grid;
place-items: center;
}
.circular-progress:before {
content: "";
position: absolute;
height: 90%;
width: 90%;
background-color: #ffffff;
border-radius: 50%;
}
.value-container {
position: relative;
font-family: var(--main-font);
font-size: 1.3rem;
color: var(--bs-primary);
font-weight: 600;
}
<section class="skill">
<div class="container">
<div class="skill-grid">
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="90">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="80">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="60">0%</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="50">0%</div>
</div>
<p>UI Design</p>
</div>
</div>
</div>
</section>

You can easily simplify your code:
Better use the querySelectorAll() (and it's single element counterpart querySelector() selection method, since it provides a more versatile css-like selector syntax.
As commented by #Peter B getElementsByClassName()
selects multiple elements (besides it's expect the raw class name without trailing "." dots)
thus, you need to loop through all elements and process each item.
// find all progress circles
let progressBars = document.querySelectorAll(".circular-progress");
progressBars.forEach((progressBar) => {
// select child value container
let valueContainer = progressBar.querySelector(".value-container");
let progressValue = valueContainer.dataset.start;
let progressEndValue = valueContainer.dataset.progress;
let i = 0;
// increment progress angles
let progress = setInterval(() => {
i++;
valueContainer.textContent = `${[i]}%`;
progressBar.style.background = `conic-gradient(
#4d5bf9 ${i * 3.6}deg,
#cadcff ${i * 3.6}deg
)`;
// stop animation
if (i >= progressEndValue) {
clearInterval(progress);
}
}, 10);
});
.skill .container {
display: grid;
align-items: center;
}
.skill-grid {
display: grid;
grid-template-columns: 190px 190px;
grid-template-rows: 190px 190px;
justify-content: center;
column-gap: 2.5rem;
row-gap: 100px;
margin-right: 2rem;
position: relative;
}
.skill-card {
background-color: var(--white);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 1 1 6rem;
/* padding: 3rem 4rem; */
border-radius: 0.5rem;
transition: transform ease-in-out 0.3s;
}
.skill-card p {
font-size: 1rem;
font-weight: 600;
text-align: center;
padding-top: 10px;
}
.circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
display: grid;
place-items: center;
}
.circular-progress:before {
content: "";
position: absolute;
height: 90%;
width: 90%;
background-color: #ffffff;
border-radius: 50%;
}
.value-container {
position: relative;
font-family: var(--main-font);
font-size: 1.3rem;
color: var(--bs-primary);
font-weight: 600;
}
<section class="skill">
<div class="container">
<div class="skill-grid">
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="90">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="80">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="60">0%</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="50">0%</div>
</div>
<p>UI Design</p>
</div>
</div>
</div>
</section>
In the above example we're selecting the outer progress circle elements.
Since the text labels are just child elements, we can select them within the loop.

Problem with displaying number in inner text

newbie here...
I am working on some simple project where I am trying to simulate bank app.
Thing is that when I click on send money button, I want to take value from input value, and then subtract this value from my whole account balance.
Really simple, but after first transaction I get value which I want, but after second time I get innerText displaying "Nan" instead of some number value.
Here it is javascript file, if you can see from this why I get error.
Also here it is html and css if you don't understand what I am talking about.
////////////////// TOTAL MONEY FROM CARDS ///////////////////////
const totalMoney = document.querySelector(`.totalMoney`);
const allcards = document.querySelectorAll(`.cards`);
let totalMoneyAccount = 0;
allcards.forEach((kartica) => {
let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
novacNaKartici = parseInt(novacNaKartici);
totalMoneyAccount += novacNaKartici;
totalMoney.innerText = ` ${replika2} $`;
});
//////////////////////////// TRANSFER MONEY TO SOMEONE /////////////////////////////
const reciver = document.querySelector(`input[name='recivier']`);
let amount = document.querySelector(`input[name='amount']`);
const sendMoneyBtn = document.querySelector(`.sendBtn`);
const transakcijeParent = document.querySelector(`.transakcije`);
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
function updateProfile(totalMoneyAccount) {
totalMoney.innerHTML = totalMoneyAccount;
}
<!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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="style.css" />
<title>Bank app</title>
</head>
<body>
<div class="container">
<div class="profile">
<div class="header">
<span class="material-symbols-outlined"> notifications </span>
<span class="material-symbols-outlined"> search </span>
</div>
<div class="person">
<img src="/img/cost1.jpg" alt="" />
<p>Random user</p>
<span class="totalMoney" style="font-size: 20px;"></span>
</div>
<div class="menu">
<div class="account flex">
<span class="material-symbols-outlined"> manage_accounts </span>
<p>Accounts</p>
</div>
<div class="transactions flex">
<span class="material-symbols-outlined"> receipt_long </span>
<p>Transactions</p>
</div>
<div class="bonus flex">
<span class="material-symbols-outlined"> star </span>
<p>Bonus</p>
</div>
<div class="invest flex">
<span class="material-symbols-outlined"> trending_up </span>
<p>Investments</p>
</div>
<div class="logOut flex">
<span class="material-symbols-outlined"> logout </span>
<p>Log Out</p>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="naslov">
<p>Cards</p>
<span class="material-symbols-outlined">
add_circle
</span>
</div>
<div class="allCards">
<div class="cards changeJustify">
<div class="singleCard">
<img src="/img/visa.png" alt="" class="changeImg"/>
</div>
<div class="opis">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: black; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance">
<span class="material-symbols-outlined changeSpan dots">
more_vert
</span>
<span style="font-size: 22px; color:grey(59, 59, 59);" class="novacNaKartici">2500$</span>
</div>
</div>
<div class="cards changeJustify">
<div class="singleCard ">
<img src="/img/american.jpg" alt="" class="changeImg"/>
</div>
<div class="opis ">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: grey; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance ">
<span class="material-symbols-outlined changeSpan dots" >
more_vert
</span>
<span style="font-size: 22px; color:black;" class="novacNaKartici">3500$</span>
</div>
</div>
</div>
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transactions</p>
<div class="transakcije">
</div>
</div>
</div>
<div class="right">
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transfer money</p>
<div class="transfer">
<label for="recivier">Transfer to</label>
<input type="text" placeholder="antonio3101" name="recivier">
<label for="amount">Amount</label>
<input type="number" placeholder="$300..." name="amount">
<button class="sendBtn">Send</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
background-color: #f1f2f6;
}
.profile {
height: 100vh;
width: 20%;
background-color: #1d1c57;
display: flex;
flex-direction: column;
color: white;
}
.profile .header {
display: flex;
padding: 30px;
align-items: center;
justify-content: space-between;
color: #7979a6;
}
.profile .header span {
font-size: 26px;
}
.profile .header span:hover {
color: white;
}
.profile .person {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.profile .person img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.profile .person p {
font-size: 26px;
color: #c6c5d8;
}
.profile .menu {
margin-top: 100px;
padding: 20px;
background-color: #262467;
border-radius: 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
position: relative;
font-size: 22px;
color: #7c7eaa;
}
.profile .flex {
margin-left: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.profile .flex:hover {
margin-left: 40px;
color: white;
transition: ease-in-out;
}
.logOut {
position: absolute;
bottom: 50px;
}
/*-------------------------- KARTICE ----------------------------------------- */
.main .naslov {
color: grey;
font-size: 30px;
font-weight: bold;
}
.naslov {
display: flex;
align-items: center;
justify-content: space-between;
}
.naslov span {
font-size: 32px;
}
.naslov span:hover {
color: black;
}
.main .left {
display: flex;
flex-direction: column;
margin-left: 30px;
}
.main .left .cards {
background-color: #ffffff;
padding: 20px;
display: flex;
padding: 20px;
border-radius: 20px;
}
.cards {
margin-top: 10px;
}
.cards .singleCard {
display: flex;
width: 100%;
}
.allCards {
display: flex;
flex-direction: column;
}
.cards .singleCard img {
width: 250px;
padding-right: 10px;
}
.cards .opis p {
margin: 0;
padding: 0;
margin-left: 10px;
}
.cards .opis {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.cards .balance {
margin-left: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/*------------------------------- CHANGE CARD -------------------------------- */
.changeImg {
height: 50px;
object-fit: cover;
}
.changeSpan {
display: none;
}
.changeJustify {
display: flex;
align-items: center;
}
.changeBalance {
display: none;
}
/*-------------------------- TRANSAKCIJE ----------------------------------------- */
.transakcije {
background-color: white;
display: flex;
flex-direction: column;
padding: 10px;
}
.single-transaction {
display: flex;
margin-left: 10px;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid grey;
}
.single-transaction img {
height: 60px;
width: 60px;
border-radius: 50%;
object-fit: cover;
}
.single-transaction .destination {
font-size: 16px;
color: rgb(73, 73, 73);
font-weight: bold;
}
.single-transaction .amount {
color: rgb(30, 149, 30);
font-weight: bold;
font-size: 16px;
}
.single-transaction:last-child {
border-bottom: 0;
}
/*-------------------------- RIGHT SECTIONS ----------------------------------------- */
/*-------------------------- TRANSFER MONEY ----------------------------------------- */
.right {
display: flex;
flex-direction: column;
margin-left: 100px;
}
.right .transfer {
background-color: #1d1c57;
padding: 50px 20px;
border-radius: 10px;
margin-left: 10px;
margin-right: 20px;
}
.right .transfer input {
height: 30px;
font: 24px;
margin-left: 10px;
}
.right .transfer label {
margin-left: 20px;
color: white;
}
.right .transfer button {
padding: 10px 15px;
color: black;
background-color: white;
border-radius: 5px;
border: 0;
margin-left: 20px;
margin-right: 20px;
}

You are overwriting your amount variable (which points to an input element) with the value inputted into said input.
Hence, after the first click you no longer have a reference to the input element: your code tries to read the value property of the integer amount of the last transaction. This results in the following evaluation: parseInt(amount.value) -> parseInt(undefined) -> NaN.
Change this code:
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
to something like this:
sendMoneyBtn.addEventListener(`click`, () => {
const amountValue = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amountValue;
updateProfile(totalMoneyAccount);
});
Credit to #JohnnyMopp for noticing it first.

The client.Height function in conjunction with the forEach method JS

I have an accordion list and my task was to implement a smooth tabs open/close function for dynamic content without a set height.
The forEach method works perfectly.
The smooth open/close function (setHeight in JS snippet)also works fine, but only for the first tab.
In other tabs this function does not work and the opening does not happen as we would like it to.
I've already racked my brains.
How can I combine the forEach method and the "setHeight" function so that nothing breaks?
const accItems = document.querySelectorAll('.accordion__item');
accItems.forEach((item) => {
const icon = item.querySelector('.accordion__icon');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', () => {
if (item.classList.contains('open')) {
item.classList.remove('open');
icon.classList.remove('open');
content.classList.remove('open');
} else {
const accOpen = document.querySelectorAll('.open');
accOpen.forEach((open) => {
open.classList.remove('open');
});
item.classList.add('open');
icon.classList.add('open');
content.classList.add('open');
}
if (content.clientHeight) {
content.style.height = 0;
} else {
let accText = item.querySelector('.acc-text');
content.style.height = accText.clientHeight + "px";
}
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__item.open {
width: 100%; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__icon.open {
transform: rotate(45deg); }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden; }
.accordion__content.open {
margin-bottom: 1.2rem;
height: 100%; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item open">
<div class="accordion__item--header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon open">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content open">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>

It does not seem that you need setHeight which is the one that messes the display
Here is a delegated version
const accordionItems = document.querySelectorAll(".accordion__item");
document.querySelector('.accordion').addEventListener('click', (e) => {
const item = e.target.closest(".accordion__item");
if (!item) return
accordionItems.forEach(acItem => {
if (acItem !== item) {
acItem.classList.remove('open');
acItem.querySelector('.accordion__icon').classList.remove('open');
acItem.querySelector('.accordion__content').classList.remove('open');
}
});
const icon = item.querySelector('.accordion__icon');
const content = item.querySelector('.accordion__content');
item.classList.toggle("open")
const isOpen = item.classList.contains("open");
icon.classList.toggle("open", isOpen);
content.classList.toggle('open', isOpen);
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2;
}
html {
font-size: 62.5%;
}
h5 {
margin: 0;
}
p {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem;
}
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto;
}
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem;
}
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem;
}
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4;
}
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer;
}
.accordion__item.open {
width: 100%;
}
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase;
}
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease;
}
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor;
}
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer;
}
.accordion__icon.open {
transform: rotate(45deg);
}
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden;
}
.accordion__content.open {
margin-bottom: 1.2rem;
height: 100%;
}
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item open">
<div class="accordion__item--header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon open">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content open" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>

cleaned up js to make it more readable:
const accItems = document.querySelectorAll('.accordion__item');
function handleItemClick(e, i) {
if (e) e.preventDefault();
const actives = document.getElementsByClassName("open");
while (actives.length)
actives[0].classList.remove('open');
accItems[i].classList.add("open");
}
accItems.forEach((item, i) =>
item.addEventListener("click", (e) => handleItemClick(e, i))
);
Handling height with just css:
I made icon and content children of .open
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.open .accordion__item {
width: 100%; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 0;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
open .accordion__icon {
transform: rotate(45deg);
height: 2rem; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden; }
.open .accordion__content {
margin-bottom: 1.2rem;
height: 100%; }

scroll animation with html # tags

I currently am trying to code a website to animate moving across the x-axis to access different sections of the page (page content in 'tab-content'). I have a navbar that has different headers, this is fixed, I want the user to click on each header and be taken to that section. I managed to take the user to the desired section/div with some JS code however, there isn't any animation it defaults to the selected section/div just suddenly being on screen. How do I animate with pure JS or CSS. I need the clicking of the header to move (motion) the user to that div. I'm new to web dev.
here some of my code
HTML
<div class="main-info">
<div class="nav-container">
<div class="nav-bar">
<ul>
<li data-tab-target="#show" class="tab">Show</li>
<li data-tab-target="#about" class="tab">About</li>
<li data-tab-target="#lookbook" class="tab">Lookbook</li>
<li data-tab-target="#process" class="tab">Process</li>
</ul>
</div>
<div class="info overlay">
<div class="text">
MA
Coming Soon
BA
</div>
Back
</div>
</div>
<div class="tab-content">
<div id="show" data-tab-content class="active">
<p>VIDEO</p>
</div>
<div id="about" data-tab-content>
<p>About</p>
</div>
<div id="lookbook" data-tab-content>
<p>Lookbook</p>
</div>
<div id="process" data-tab-content>
<p>Process</p>
</div>
</div>
</div>
CSS
.main-info {
background-color: transparent;
height: 100vh;
overflow: hidden;
}
.nav-container {
position: fixed;
}
.nav-bar {
width: 80vw;
height: 10vh;
left: 10vw;
position: absolute;
top: 5vh;
}
.nav-bar ul {
text-transform: uppercase;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.tab a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
color: black;
text-decoration: none;
}
.tab:hover {
cursor: pointer;
opacity: 0.6;
}
.tab.active {
background-color: whitesmoke;
}
.info {
width: 90vw;
height: 10vh;
/* border: 1px solid red; */
left: 5vw;
position: absolute;
top: 80vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.info a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.1rem;
color: black;
text-decoration: none;
border: 1px solid teal;
}
.text {
width: 30%;
display: flex;
justify-content: space-between;
}
.tab-content {
border: 1px solid teal;
position: absolute;
left: 0;
top: 0;
height: 100vh;
z-index: -11;
display: flex;
flex: row nowrap;
justify-content: flex-start;
}
[data-tab-content] {
border: 1px solid blueviolet;
background-color: violet;
font-size: 3rem;
color: blue;
scroll-behavior: smooth;
display: none;
width: 100vw;
height: 100vh;
}
.active[data-tab-content] {
display: block;
}
JS
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
});
tab.classList.add('active')
target.classList.add('active');
});
});

You almost got it. Instead of setting the scroll-behavior on the elements that are inside a scrollable element, put it on either the element that has a scrollbar.
.tab-content {
scroll-behavior: smooth;
}
Or on the top most element to have all elements move with a smooth scrolling animation.
:root {
scroll-behavior: smooth;
}

Responsive elements hidden when no space

I dont really know what exacly write.
I have 4 boxes with width 300px, if document width is (I dont know maybe) 600px then 2 boxes should stay at page and others should be hide.
Is there a way to make it dynamic? Maybe js or jquery? Hope you can help me with this! ^^
Here is what I have now.
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<article class='Conteiner' id='howItWorks'>
<section class='Conteiner-Highlight howItWorks-Highlight'>Jak to działa?</section>
<section class='Steps'>
<section class='step'><div class='digit'>1</div><span class='digit-description'>Analizujemy <br> potrzeby klienta</span></section>
<section class='step_hidden'><div class='digit'>2</div><span class='digit-description'>Tworzymy <br> projekt graficzny</span></section>
<section class='step_hidden'><div class='digit'>3</div><span class='digit-description'>Przedstawiamy <br> propozycję klientowi</span></section>
<section class='step_hidden'><div class='digit'>4</div><span class='digit-description'>Przystępujemy <br> do pisania strony</span></section>
</section>
<section class='steps-Controls'>
<span class='steps_check'>
<i class='material-icons'>radio_button_checked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
</span>
<span class='steps_arrows'>
<span class='step_arrow' id='step_arrow_left'><i class='material-icons'>keyboard_arrow_left</i></span>
<span class='step_arrow' id='step_arrow_right'><i class='material-icons'>keyboard_arrow_right</i></span>
</span>
</section>
</article>
</body>
</html>
SCSS
:root{
--red: rgb(231,76,77);
--white: rgb(242,241,244);
--darker-blue: rgb(14,60,91);
}
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100vh;
color: #0E3C5B;
font-size: 16px;
}
/* Modern browsers */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
#media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
.Conteiner-Highlight{
width: 100%;
height: 100px;
font-family: Roboto;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
font-size: 1.2rem;
}
.Conteiner{
width: 100%;
min-height: 1000px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-bottom: 1px solid rgb(14,60,91);
}
#howItWorks{
.Steps{
width: 80%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row;
.step , .step_hidden{
max-width: 300px;
width: 80%;
max-height: 500px;
height: 60vh;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0px 4px 10px rgba(144,144,144,.5);
margin: 0 50px;
border-bottom: 10px solid rgb(231,76,77);
padding: 10px;
transition: all .3s ease-in-out;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.digit{
height: 40%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-family: Roboto;
font-weight: 900;
color: rgb(231,76,77);
}
.digit-description{
height: 30%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: .5rem;
font-family: Raleway;
font-weight: 400;
}
}
.step_hidden{
opacity: .3;
}
.arrow{
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
}
.steps-Controls{
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin: 50px 0;
.steps_arrows{
display: flex;
flex-flow: row;
margin: 10px 0;
cursor:pointer;
.step_arrow{
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
margin: 0 10px;
background-color: var(--red);
i{
color: var(--white);
}
}
}
.steps_check{
display: flex;
flex-flow: row;
cursor:pointer;
i{
font-size: .4rem;
}
}
}
}
CodePen

There are several ways to do this.
You could just make the css-container of those elements non-wrapping, so if there isn't enough space, they are just not visisble by window-size.
In this scenario it is possible to see 2 + 1/2 Elements when you resize the window because they "disappear" gradualy.
The other solution is just to use javascript. You could write a function that is fired on each resize-event and write an if-condition where those elements' visibility is hidden when the window-size gets too small.
For both solutions there are plenty of examples and documentation out there, so i would just suggest you search for those and pick one that is easy to understand for you and fit's your situation.
edit: Since other comments on your question came up: If you only make your decision based on the whole viewport-size, then you can use #media-queries. You can't use them if you are depending not on the viewport but some outer html-element and layouting.

You can achive this by media queries. if you expand the snippet you can see all other hidden boxes.
.container{
display: flex;
flex-direction : row;
}
.container .box{
margin: 5px;
background-color : #333;
width : 50px;
height: 50px;
}
#media screen and ( max-width: 982px ) {
.container .box:not(:first-of-type){
display:none;
}
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
example according to you code :
https://codepen.io/anon/pen/EeOgxE

I don't really know what exactly (to) reply ;)
You could skip script entirely and go with CSS, assuming that each box is 300px wide and 600px combined, you could do something like this:
/* Showing 2 */
#media (min-width: 600px)
{
.my-container-with-four-boxes {
width: 600px;
height: 300px;
overflow: hidden;
}
}
/* Showing 3 */
#media (min-width: 900px)
{
.my-container-with-four-boxes {
width: 900px;
height: 300px;
overflow: hidden;
}
}
/* Showing 4 */
#media (min-width: 1200px)
{
.my-container-with-four-boxes {
width: 1200px;
height: 300px;
}
}
You'd probably have to adjust the screen limitations and container sizes with padding or something else not mentioned here ;)