Accordions are one of those annoying instruments that some of you may have seen already.
It has one of those bellows with a keypad down below
here and then you blow and then play the music with the keys there.
And not everybody enjoys it.
I'm pretty sure. But no offense to accordion players.
Accordions in bootstrap are very interesting for sure.
We'll look at how we apply accordions to be able to reveal and
hide content in our web page in this exercise.
Going back to About Us at HTML page where we had the corporate leadership information.
Now, I'm going to replace the top navigation with an accordion based navigation.
I'm going to remove this UL that defines the term navigation completely.
And then we're gonna design the accordion around the content that we already have.
So, let's delete this UL that contains the tab navigation so they will be left
with just this part which is enclosed inside the top panel and the top content.
So, we're going to go and modify this.
Going to this div here,
I'm going to remove this class from there and then I apply the id as accordion.
We need this id later on to be able to create the accordion that div,
that contains this content is still in place there.
So, the top content is now changed to accordion.
Now, each of this content in here,
we're going to convert that into a card
based structure there so that they can reveal the content in
each of those cards so you will see me using the card and
the card body classes there to enclose this content.
Now, going into the actual content here,
I'm going to start applying the card class here with the div there.
So, we'll say, "div class card" and
then close the div there and then this content goes into the div there.
Now, in here, we are going to go in and create
a div with the class "card header."
I'm going to show you for one of them and then we are going to
repeat this process for the remaining three also.
So, we'll say, "card header roll tab" and then "id peterhead."
I'm going to take this h3 from down below here,
cut it out and then paste it into the card panel.
So, this h3 that defines the name of
the corporate leadership person is cut from
inside the tab panel and then moved in to the card header here.
This is going to act as my navigation aid.
Now, to this h3, I'm going to apply a class called mb-0.
So, this is mb-0 here.
Now, this name itself,
I'm going to enclose this inside and an a,
so I will go to the next line and then say,
"a data toggle" and
the data toggle will say, "collapse."
So, now, you see that you're using the collapse plugin.
So, we have this closing h3 there.
So, I'm going to shift it to the next line
here and then I'm going to close the a tag right there.
So, with this the a tag now encloses the name of the CEO in here.
And then the h3 tag of course closes the h3 on top and then this is
inside the div which is the class card header.
So, this forms the header structure for my accordion div.
Going now to the tab panel below,
I'm going to change this class from tab panel fade to collapse.
So this would be a collapse plugin which will be useful for our accordion
and also I will remove this active class
for this and the id will be left as peter for this.
And then you'll say, "data parent" and you would specify accordion.
You see why we gave the id of accordion to the div that encloses all these content.
So, this is the way to specify that this is going to
form part of the accordion that you are constructing there.
So, that's why data parent accordion.
Now, the content inside this tab panel,
I'm going to enclose it inside the div with
the class card body
and close off that div here,
and then indent this content in there.
Let's save the changes and then go and take a look at our web page on this moment.
Going to our web page you now notice that in the corporate leadership,
the CEO's name is highlighted here in the card header here.
And then the content is down below here.
Now, we will create the remaining three down below and then enclose all of them in there.
I'm going to repeat the same structure for the remaining ones.
So, I will have the card with the card header,
and the card header will enclose the name of the person like this.
So, you pretty much will follow
the same structure for the remaining three pieces of content.
So, let's make the changes and then we'll come back and review the code.
Coming back to the code,
you now see that for the remaining three,
you notice that I am still using the card here
with the card header here and h3 with the mb-0.
This is inside the card header class div there and then down below
the class only as collapse and then with the id
and then the card body enclosing the P there.
Same thing with the remaining two also.
So, with this change,
these three remaining corporate leaders information will be
collapsed but Peter Pan's scarpered information
will be revealed when the first render the web page.
So, with this change, now,
this code snippet is obviously available in
the instructions that follow here so no need to worry too much.
You can always refer to that to ensure that you have done it correctly.
So, let's save the changes.
Switching back to our web page,
you now see the accordion constructed here.
So, you see that the first corporate leaders information is displayed here.
The remaining three are collapsed in this moment.
So, that's the reason for the use of the collapse plugin and also the reason for shifting
the name of the corporate leader into the card title.
See you saw that it'll be displayed like this in there.
Now, clicking on any one of them you now notice that when you click on
that that content will be revealed but the remaining three are hidden.
So, this is the accordion behavior here.
So with this, we complete this exercise.
This is a good time for you to do a git commit with the message accordion..
