This lesson we're going to be setting up, our accordion and accordions are very useful components and
users love them.
So first of all, we need to open up our editor and create some device.
So just create some random device.
We're going to need some content in these divs.
And as you know, with accordion, you click the top one and it opens up the rest of the text.
So we need to have quite a bit of extra text here.
I'm going to go to blind text to generator, and there's a number of these on line that you can utilize
in order to get some quick and easy lorem ipsum placeholder text.
And you can use that within this project.
And of course, you can write your own text as well.
So just going in there, I'm going to do a little bit of back and forth while I paste in the text.
And also I'm going to have a little bit longer.
One, I'm going to change this one into a div.
And of course, the script will work on all types of elements.
So it doesn't have to actually be a div.
But for structure sake, I want to have them all as diffs.
So we've got our title that we're going to click and that's going to open up the rest of the text.
And that's the idea of the accordion, is to have hidden content that the user can click and visualize
and see.
So we need to duplicate the this.
And also I'm going to do this by adding in classes.
So this is going to be the main class.
So it'll be the main title, one that gets clicked and this one will have a class of content.
And this will get once it gets click, it will show that content.
So each one of these are going to be a pair of mean and content.
And what we can do is we can just duplicate these out.
You can create as many as you want.
It's we're going to make the script dynamic enough to be able to open up as many as we need.
And I'm going to change some of the text here so that we know that there are different ones.
And of course, if you are changing, if you're creating your own website, you're not going to be using
the dummy text and you have actual text and information here.
So we've got all of this information here and now.
Next thing that we want to do is want to use some styling in order to hide that content element because
we don't want to be able to see those by default.
So we've got our content class and this one would just apply display property of none.
So that will hide it from the visible area and only showing the mean ones.
We can also add some additional styling, let's add some padding around it or update the font size to
make it a little bit smaller than the main text.
And we could also do a border around it.
And you can, of course, apply your own styling as the next one that we have is our main class.
And I'm going to make these ones a little bit bigger so that they stand out more.
So that's updating the font size.
And we could also add a background color so we can distinguish it from the rest of the content.
So making them slightly darker with a darker background.
So we've got them fairly big now.
And lastly, but of course, not least we need to have a class that we're going to be playing with our
JavaScript and we can call that active.
And the way that this will work is once we click the title or the main element, it's going to show
the one that's underneath it.
And using Octave, it's going to apply that octave class supplying display block so that it becomes
visible.
Once you've added in your styling and your HTML, you're ready to move on to the next step where we're
going to be applying our JavaScript.
So that's coming up in the next lesson.
Go ahead and set up your page just as I've set up this page and you're ready to move on to the next
one.
And of course, this content doesn't have to be identical to mine.
You can add in your own content just keeping in mind that the second div with the class of content will
always be the hidden one.
And that's the one that's going to show once we click these titles.