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 !