Hi, good job and very nice accordion. I played little bit with your js code and reduced it to 1 loop. this is how i did it with 3 steps. Step 1: first I needed to add to your css styles 2 new classes, so i could toggle the Dom styles with js: ``` .hide{ display: none; } .section-title.minus{ background: url(./images/icon-minus.svg) no-repeat center right; } ``` Step 2. HTML file i added `.hide` class to all `

` tags except the first because i want it to be open at firt load of the page. also Only to the first title added the `.minus` class to show the minus icon because the text is also showen: ```

What is Frontend Mentor, and how will it help me?

Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.

Is Frontend Mentor free?

Can I use Frontend Mentor projects in my portfolio?

How can I get help if I'm stuck on a challenge?

``` Step 3. I've used the `classList.toggle()` js method to toggle between classes, and also used the same loop for the Keyboard event. this is the reduced code: ``` const clickOnTitle = document.querySelectorAll('h2'); const sectionP = document.querySelectorAll('section p'); for(let i = 0; i < clickOnTitle.length; i++) { /*Mouse Event */ clickOnTitle[i].addEventListener('click', function () { sectionP[i].classList.toggle('hide') clickOnTitle[i].classList.toggle('minus') }) /*Keyboard Event*/ clickOnTitle[i].addEventListener('keydown', event => { if (event.key === 'Enter') { sectionP[i].classList.toggle('hide') clickOnTitle[i].classList.toggle('minus') } }) } ``` This code works well on my computer, didn't test it on mobile. If you have any question Iet me know. I hope you like my reduced code :)

Dror Katzir

All solutions

Launch Countdown Timer

Manage landing page

Multi Step Form - ReactJs & Local Storage