Dot

Fix The Crippled Accordian

Here's a half-baked example you can easily fix.

It starts with properly applying event listeners on each of the 'acc-title' classes, and it can easily progress from there.

What you do may produce more errors. Be especially watchful of your nodelist and the control functions you bring to bear on it.

As it stands, an IIFE generates a nodelist on page load and adds event listeners.

You may want to switch out the forEach array function for a for...of, or for...in, depending on the section of the node you're looking at. Because the returned nodelist contains enumerated objects, it works, but with DOM Node slices of different composition, you might not be so lucky.

One other major problem you may notice right away, too, is the div container's styling. It exists in the stylesheet, but isn't applied to a class that exists.

Ripe for refactoring

The React adage, 'if it has a class, it could be a component of its own' applies well here. The accordian div/class heirarchy is ripe pickings for refactoring into a series of React components. Enough is correct here that abstracting away unnecessary classes (and, therefore, components) for any refactor you do will be worth the effort for what you gain in know-how.

To get a sense of how broke it is, click on the big heading, or the hashtag 'acc-footer'.

It's not well-behaved is it? It should really only listen on 'acc-title', revealing the single child div 'acc-body' and its content.

Good luck.

Click to hide the Body

Why innerHTML is so great...

Fix The Crippled Accordian

Ripe for refactoring

One Accordian

Click to hide the Body

Click to hide the Body

Two Accordian

Click to hide the Body

Click to hide the Body