I am going through section 1.4 and just finished up the EventListener sections and thought I would take Zac’s advice and try building out accordion style tabs. I have it sort of working but for some reason I have to click on the tab twice before it opens the first time. Not sure what is going on. Any help is appreciated. See the jsbin.
My first suggestion would be to make the tab titles actual links. They can have a URL of #tab-x and then the related content area would have related IDs so the links work even if JS isn’t applied (just make sure you are doing the initial hiding of the content via JS so if there is no JS you can still access the content).
You did some good thinking with your accordion code, but you might find tweaking the html like this make it easier. It may also solve your double click issue just with the titles being links with preventDefault applied.
Thanks, Zac! That totally makes sense, I kind of rushed through the HTML part just to get the page built so I could start working on the JS. I updated the JSBin but still getting the double click issue.
Ok, after a good night sleep, I decided to open this back up and mess around with it. I tried changing the last parameter in the eventListener to true and that solved the issue. I’m not sure why yet (I haven’t made it that far in the course) but look forward to finding out 😉