PLease help! :((

Can any of you help me figure out why this code doesn’t work?
I spent 2 hours trying to fix it.
No errors shows up in the console.

HTML

[code]<div class=”logos”>
<div class=”portfolio__button” data-content-target=”#logosContainer”>Logos</div>

<div class=”logos__container” id=”logosContainer” data-portfolio-content>
<div class=”logo-card”>

</div>
<div class=”logo-card”>

</div>
<div class=”logo-card”>

</div>

</div>
</div>

<div class=”illustrations”>
<div class=”portfolio__button” data-content-target=”#illustrationsContent”>Illustrations</div>

<div class=”illustrations__container” id=”illustrationsContent” data-portfolio-content>
<div class=”illustrations__card”></div>
</div>
</div>[/code]

JS

[code]const portfolioButton = document.querySelectorAll(‘[data-content-targe]’);
const content = document.querySelectorAll(‘[data-portfolio-content]’);

portfolioButton.forEach(button => {
button.addEventListener(‘click’, (e) => {
const targetSection = document.querySelector(button.dataset.contentTarget);
targetSection.classList.toggle(‘logos__container-active’);
portfolioButton.classList.toggle(‘portfolio__button-active’);
})
})[/code]

CSS

[code].portfolio__button {
width: 85vw;
height: 70px;
margin: 10px auto;
border: solid 3px black;
cursor: pointer;

display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
font-size: 1.7rem;
}

.logos__container {
width: 80vw;
height: 0;
margin: 0 auto;
background: #333;
overflow: scroll;
}
.logo-card {
width: 250px;
height: 250px;
background: #555;
margin: 10px auto;
}
/*============
Active Clases
============== */
.portfolio__button-active {
border: solid 3px black;
color: white;
background: var(–clr);
}
.containers-active {
width: 500px;
}[/code]

Also in #JavaScript _↴