Welcome to the JavaScript accordion section in the upcoming lessons, so I'm going to be walking you
through how to build a JavaScript accordion from scratch.
Going could be quite flexible.
And it's going to allow you to add in content into the body content area, update the head and you can
also apply some styling.
And we're going to walk through just different ways how we can handle accordions.
And this is all built from scratch.
And the upcoming lessons objective of the upcoming lessons in particular within this section is to get
you coding JavaScript.
So I've got to have a number of exercises in each lesson.
I'm going to present the challenge to you.
See this pop up counter show up.
That means it's your turn to code.
And then I show you the solution and it's up to you to try it out.
We're going to start with simply setting up an HTML accordion.
So the simple structure for the accordion, applying all of the classes as attributes for the elements
and then apply some staling to make it look more like an accordion.
And this is all going to be done with scissors and as well as HTML.
And then we get into the JavaScript and this is where the fun part comes in, where we make things happen
using query selector all selecting all the elements and then looping through the node list that gets
returned and selecting those elements that we're going to play an event listener to those elements and
also have a function that's going to output the event target.
That's triggering also how you can use classlessness to toggle add, remove classes from elements and
then more of what we can do to make this fully functional, hiding all the open panels and then some
finishing touches with staling and some additional options you might want to include within your accordion
if you have any questions or comments or want clarity on any of the topics that are covered in the upcoming
lessons, let me know within the Q&A section.
I'd love to hear from you.
So let's get coding.