Exercise (Video): Accordion

Loading...

Do curso por The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1315 classificações

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1315 classificações

Curso 1 de 4 em Specialization Full-Stack Web Development with React

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

Na lição

Bootstrap Javascript Components

This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs, pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the carousel. At the end of this module you need to complete the third assignment.

Collapse and Accordion5:13

Exercise (Video): Accordion8:47

Conheça os instrutores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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..

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play