In this lesson we're going to be developing an accordion as shown in this example
when we click each heading the previous panel collapses and a new one expands
in order to create an accordion.
We start with a div and assign the class panel group.
We also need to set an I.D. we've set the I.D. to accordion.
You'll see how this is used in a moment for the purpose of this lesson.
We're starting with only one panel so I'm going to refresh the page and we'll be adding the second and
third panel.
As we progressed through the tutorial.
Next we create another div with two classes panel and panel default as you learned.
This defines the style color of our panels in this case panel default.
We'll create a light gray color inside this div.
We have another div with the class panel with the class panel heading this contains our title as we
learned in the last couple of exercises.
It's important to note that our 8 element now also has a new attribute which we haven't seen before
called data.
Parent.
This is necessary if developing an accordion the data parent value must be set to the I.D. that we initially
defined in our first div element shown here
so those too much must match in order for this to work.
We also have an h r u f attribute set to e x 1 this value needs to match the div that contains our panel
content.
So this h r e f attribute e x 1 links to the content inside this div in the content inside this div
is what we're seeing displayed here in our web browser.
The content div has three classes defined panel collapse collapse and in so we've gone over those already
in previous exercises and just again just to emphasize the ideas here must match the H R F attribute
here.
We've set it to e x 1.
Again you can you can name it whatever you want to name it but they must match
and we have another nested div here with the class panel body and this div contains our content to be
displayed here so if I were to change that or just make a small add word and refresh you can see it
shows up there to change the heading you just change this text over here.
Okay now we're gonna add some additional panels to complete the accordion effect.
So I've copied and pasted that block of code that we just went over because it's we're gonna be using
an almost identical block of code we just have to make a few minor changes for our second panel item.
So the first thing we need to do is set e x 1 to e x 2 and also update this I.D. to x 2.
We can't have two panels with the same I.D. The second panel has to link to the I.D. of the second panel
and I'll just change mean I'll just changes from main heading to heading to read all changes back to
just adding 1 don't seem to file in refresh.
So now you can see that we have two headings and two content areas
and it's very simple to for the third you do the same thing again.
Just copy that block of code paste it and changes to the X3 x3 and heading three
and that's the full accordion.
You can add as many items as you want but we'll leave it at three for the purpose of this story.