Bootstrap accordion Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 38 of bootstrap tutorial in
this video we'll discuss the bootstrap
accordion in our previous video we
discussed the bootstrap collapse plugin
in this video we'll discuss how to
extend the collapse plug-in to build an
accordion that looks like this so let's
flip to visual studio the first thing
that we're going to do here is create a
panel group to create a panel group we
create a development with class panel
group and I'm also going to give an ID
to this panel group since we are
building an accordion let's call it
accordion and inside this panel group
let's go ahead and create a panel to
create a panel we create a development
with class panel let's also apply panel
primary contextual state class and
within our panel let's go ahead and
create panel heading to create a panel
heading we create a development with
class panel heading and inside this
let's go ahead and use H for element to
create the panel heading let's set the
class of this to panel title and inside
this let's use an anchor element let's
point its href attribute for now to a
hash and then within our panel heading
we want to display continent names at
the moment we have got three continents
here Asia Europe and North America so
for the first panel the heading is going
to be Asia and then let's go ahead and
create panel body now now before I
create panel body I'm going to create a
development and give it an ID in a bit
we'll see how we are going to make use
of this ID let's give this div an ID
let's call it panel body 1 and then
inside this div let's create panel body
so to create panel body we create a
development with class panel body and
inside the panel bodies we want to
create the countries that are present in
the respective continents so within Asia
we are including just three countries
but there are lot many as well so for
this example let's use three countries
so let's create an unordered list and
the first country is going to be India
cheyna and finally japan all right now
when we click on the panel heading we
want that respective panel body to be
expanded in claps so we need to link the
head with the body so to do that we are
going to use the ID of this div and then
we are going to use the jQuery ID
selector here with the href attribute
and then on this anchor element we are
also going to use two data - attributes
so data - toggle and we are going to set
that to collapse and the other data -
attribute that we are going to use is
data - parent and the parent for this
panel is this day which has the ID
accordion so again we are going to use
jQuery ID selector and point to that
Dave all right and then when the panel
initially loads you know we want to keep
all the panel bodies collapsed so to do
that on this development which is called
this ID panel body one I'm going to use
two classes panel collapse and collapse
let's make two more copies of this
development so we want one for Europe
and the other one for North America so
the last panel is going to be for North
America and let's change the country
names in you know the panel body so one
of the countries is United States of
America we have Canada and we have
Mexico and we also need to change the
IDS here so for this panel body let's
change the ID to panel body 3 and we
need to change the value within the href
attribute as well so let's do that there
and let's do the same thing for the
second panel that we have here so the ID
here is going to be
penile body - and the HTF attribute is
going to point to penile body - let's
change the continent name here to Europe
and a few countries within Europe we
have United Kingdom France and Germany
all right so let's see what changes real
littlepage notice we get an accordion
with three panels and notice all the
panel bodies are collapsed and when I
click on the panel heading the
respective panel body expands when we
click on it again it collapses and all
the bootstrap accordion panels are
working as expected so to keep all the
panels collapsed we are using panel
collapse and collapse classes now if you
want to keep them all expanded then use
another class which is in so use all
these three classes in conjunction and
you will have all the panels expanded so
at the moment we are using it on the
second panel so when we reload this page
only the second panel will be expanded
on the initial page load if you want all
of them to be expanded obviously use
collapse and in classes on all the three
panel bodies so to have all the
accordion panels collapsed on the
initial load use collapse class and on
the other hand if you want all of them
to be expanded use collapse and in
classes we can also use images with the
accordion let's say we want to display
images in the accordion as you can see
here let's flip to visual studio at the
moment we have got three images within
the images folder let's say within our
first panel we want to display the
desert image so let's change the heading
to desert and within panel body let's
replace this unordered list with an
image element and make it source
attribute point to the desert image
within the images folder and let's also
set the alt tag to desert and within our
second panel let's display jellyfish
and again in the second panel body let's
replace this unordered list with an
image element and change the image to
jellyfish and finally let's go ahead and
display penguins in the last panel so
let's change the title here to penguins
and let's replace this unordered list
with an image element and the name of
the image is going to be penguins so
let's see what changes and reload our
page notice the image here is not
responsive and we collapse the panel you
know it is properly rendered but then
when we expand it because we've got
enlarged image and it's not response to
look at that it goes outside of the
panel so if you want your image to be
responsive then on the image elements
use responsive class so let's go ahead
and use IMG responsive class so let's go
ahead and do this for all the panels
that we have let's also do it on the
first image that we have here all right
let's save our changes reload our page
now notice the images are responsive now
even when you resize your browser you
know it resizes at the moment if you
look at the grid column size we are
using call x7 let's change it to call X
is 12 so it's going to occupy all the 12
columns within our grid system and now
when we resize the browser look at that
the accordion resizes and the images
within the accordion also resizes
accordingly
thank you for listening and have a great
day