Accordion menu

Hello !
I’m trying to code my portfolio for the first time with the help of the following tutorial : Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode - YouTube

I had to modify the code a little to personalize my site but the accordion menu that I am trying to create does not work.
When you click on the buttons (which I named skills_arrow1 and skills_arrow2) the two parts named skills_content disappear :


Here is my code :
HTML :

                    <div class="skills_content">
                        <div class="skills_header">
                            <i class="uil uil-robot tech_icon"></i>
                                <h1 class="section_subtitle">Compétences techniques</h1>
                                <i class="uil uil-angle-down skills_arrow1"></i>
                        </div>
                        <div class="techskills_description skills_open">Anglais, B2 (niveau estimé C1 compréhension orale et écrite, B2 expression orale et écrite)</br>
                        Allemand B1</br>
                        Graphisme (Photoshop, Canva)</br>
                        Montage Vidéo (Premiere Pro, Imovie)</br>
                        WebDesign (HTML, CSS, Javascript)</br>
                        Figma</br>
                        Écriture pour les médias numériques
                        </div>
                    </div>
                    <!----=====Transversal skills =======-->
                    <div class="skills_content">
                        <div class="skills_header">
                            <i class="uil uil-exchange trans_icon"></i>
                            <h1 class="section_subtitle">Compétences transversales</h1>
                            <i class="uil uil-angle-down skills_arrow2"></i>
                        </div>
                            <div class="transskills_description skills_close"> Autonomie</br>
                            Curiosité</br>
                            Adaptabilité
                            </div>
                    </div> 
                </div>
            </div>            
        </section>

CSS :
.skills_arrow1,
.skills_arrow2 {
font-size: 2rem;
color: var(–first-color);
/*margin-left: auto; /j’ai pas compris pourquoi il fallait mettre ça/
transition: .4s;

.skills_close {
height: 0;
overflow: hidden;
}

.skills_open {
height: max-content;
}

.skills_arrow1 {
transform: rotate(-180deg);
}

JAVASCRIPT :
const skillsContent = document.getElementsByClassName(‘skills_content’),
skillsHeader = document.querySelectorAll(’.skills_header’)

function toggleSkills() {
let itemClass = this.parentNode.getElementsByClassName

for(i = 0; i < skillsContent.length; i++) {
    skillsContent[i].className = 'skills_content skills_close'
}
if(itemClass === 'skills_content skills_close') {
    this.parentNode.className = 'skills_content skills_open'
}

}

skillsHeader.forEach((el)=> {
el.addEventListener(‘click’, toggleSkills)
})

I hope you can help me, Thank you !

console.log('Hello world!');

Hi rupuxu,
There are a view syntax errors. In the Css file at the line

/margin-left: auto; /j’ai pas compris pourquoi il fallait mettre ça/

you missed the */ on the end. At the element .skills_close the was no } to close it.
In the javascript file you typed ’ it has to be ’ instead. I wasn’t able to test the webpage out. Hopefully my feedback helps.