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

this is part 37 of bootstrap tutorial in
this video we'll discuss the bootstrap
collapse plug in the collapse plug-in is
used to show and hide another element on
the page so here is what we want to do
at the moment we've got a button and an
image gallery when we click this toggle
image gallery button if the image
gallery is already expanded it should
collapse it if it's already collapsed
then it should expand it let's see how
to achieve this let's flip to visual
studio so within this div row I'm going
to pay some HTML in part 7 of this video
series we have discussed image gallery
and I've copied this code from there so
if we save this and when we reload our
page we get three image thumbnails when
we click on an image it takes us to the
original image now we discuss this in
part 7 in detail so I am NOT going to go
over this HTML if you need explanation
of the image gallery code please check
part 7 of this video series now in
addition to the image gallery we also
want this toggle image gallery button to
get this button I am going to use an
anchor element and we want this anchor
element to be rendered as a button so
I'm going to use BTN and BTN primary
classes and for now let's make the href
attribute point to hash the text on the
button is going to be toggle image
gallery let's save our changes and when
we reload this page notice the button
doesn't appear how we want it to so we
are going to move this image gallery
into a panel body and the button into a
panel header so for that first let's
create a panel to create a panel we
created development with class panel and
let's apply panel default class as well
and inside the panel let's create a
panel heading by creating a development
with class
pannel heading let's move this ankle
element inside panel heading and now
let's create panel body to create panel
body we created development with class
panel body and now let's move all these
three image gallery divs into panel body
so let's cut all of them from here and
place them inside panel body let's save
our changes and reload this page so
notice the button is present in the
header and the image gallery is present
a panel body at the moment when we click
this button notice nothing happens now
let's see how to toggle this image
gallery using the collapse plug-in
provided by bootstrap now I'm going to
give this panel body div and ID let's
call it
image gallery and then I'm going to make
this hf attribute point to that element
and we're going to use the jquery ID
selector hash and now in addition to
this we are going to use data - toggle
attribute and - toggle attribute value
is going to be collapsed so this does
the magic let's save our changes and
let's reload this page now look at this
the first time it doesn't work properly
notice at the moment the image gallery
is already expanded when I click this
button look at that it collapses and
immediately expands it again and from
the second time onwards it works
correctly look at that at the moment it
is expanded when we click on this it
gets collapsed when I click on it again
it expands click on it collapses expands
but the first time it's not working now
there's a way to fix this now when you
initially load this page if you want
this image gallery to be expanded then
use two classes on this development that
has this panel body class in addition to
that class we are going to use collapse
and in classes so when we do this when
we load the page initially
notice the image gallery is expanded and
look at this it's going to work first
time properly when I click on this
button look at that it collapses we
click on it again it expands so right
from the first time it works as expected
now if you want the image gallery to be
collapsed on the initial page load then
only use collapse class and not the in
class so now when we reload the page
look at that the image gallery is
collapsed when we click on it the first
time it expands when we click on it
again it collapses now you might be
wondering how do I know I have to use
these collapse and in classes well you
can inspect the image gallery in Google
Chrome and you'll get to know what
classes are dynamically applied when it
is collapsed and expanded let's actually
look at that in action so let's expand
this and I'm going to right click on
this one and select inspect from the
context menu which is going to launch
the browser developer tools so notice at
the moment the classes that are applied
the on the development that has brought
panel body class you know it has applied
collapse and in classes look at this
when we hide it only collapse class is
applied when we expanded both collapse
and in classes are applied at the moment
the trigger element here is an anchor
element now instead of using an anchor
element we can also use a button element
as the trigger element so let's use a
button so instead of an anchor element
reusing button but button element does
not have the href attribute instead of
that we use data - target attribute
let's reload this page and it should
continue to work exactly the same way as
before
notice initially when the page loads
it's collapsed and when we click this
button it expands when we click on it
again it collapses next let's discuss
expanding and collapsing the image
gallery manually using the collapse
function at the moment we are relying on
these data - attributes to expand and
collapse the image gallery instead of
using data - attributes we can use the
collapse function directly provided by
the collapse plugin and here are the
three parameter values that can be
passed to the collapse function toggle
show and hide toggle toggles a
collapsible element show shows a
collapsible element and hide hides a
collapsible element and here is what we
want to do in addition to the toggle
image gallery button we want hide image
gallery and show image gallery buttons
as well now when we click the struggle
image gallery button we want the image
gallery to be toggled hide button should
hide it and show button should show it
now instead of using data - attributes
we want to use the collapse function
directly provided by the collapse plugin
so the first thing that we are going to
do is delete these data - attributes
from the button and instead of that I am
going to use an ID let's call this
button toggle button and we want two
more buttons as well let's make two more
copies of this and let's call this
button hide button and let's call this
button show button and now we are going
to write a bit of JavaScript so let's
scroll all the way down and then write
some jQuery code so just after you know
the script tags and just before the
closing body tag I am going to use
another script element type equals text
slash JavaScript and we are going to
write over jQuery code right here so
dollar document dot ready function if
you're new to jQuery we have a tutorial
on jQuery as well so please check that
playlist
so what we want to do is hook up an
event handler to the toggle button so
the idea of the button is toggle button
so let's use the jQuery ID selector
which is hash find the button and then
wire up the click event handler so when
we click the button we want to execute a
function and what do we want to do we
want to call the collapse function
directly so we want you know either
collapse or expand you know this
development which contains our image
gallery and it has got an ID and that is
image gallery so let's again use the ID
selector find the image gallery and on
this let's call the collapse function
and to this function we are going to
pass toggle as the parameter value let's
do similar kind of thing with the other
buttons so to the hide button we want to
associate a click handler so the ID of
the hide button is ID button and when we
click the hide button we just want to
hide the image gallery so the parameter
value is going to be hide
similarly when show button is clicked we
want to call the collapse function and
pass it show as the value for the
parameter so let's save our changes and
reload this page and it should still
continue to work exactly the same way
look at this when we click toggle image
gallery you know since it's already
collapsed it expands it and it's
collapsing now and at the moment we
don't have the image gallery so we need
to change the text on these buttons so
let's go ahead and do that so on the
first button it's going to be I mean on
the second button is going to be hide
image gallery and on the last button it
is going to be showing image gallery
let's reload this page
toggle image gallery it continues to
work exactly the same way as before hide
image gallery show image gallery so
everything is working it is expected at
the moment instead of using data -
attributes we are using the collapse
function provided by the collapse plugin
finally let's discuss the events raised
by the collapse plugin so here are the
four events raised by the collapse
plugin do for show and - for hiding show
dot B s dot collapse this is fired
immediately when the show method is
called shown dot B s dot collapse this
is fired when a collapsible element has
been made visible to the user similarly
high dot B has ducked collapse this is
fired immediately when the hide method
is called and hidden dot B s dot
collapse this is fired when a
collapsible element has been hidden from
the user let's handle all these four
events so let's flip to visual studio
now and let's use the jQuery ID selector
find the image gallery so the idea of
the image galleries image gallery and
first let's handle show dot B s dot
collapse so when is this even trace this
event is raised immediately after the
show method is called so when that event
is raised we want to handle it and
execute the code that is going to be
present inside this anonymous function
so what do we want to do we simply want
to alert a message and since this show
that B is what collapse method is called
immediately after the show method is
called
you know that's the time you know when
the image gallery is about to be
expanded so that's what is the message
we will alert so we will simply say
image gallery is about to be expanded
let's make a copy of this one and also
handle shown dot B s dot collapse so
this is called after the image gallery
has been completely expanded so we are
going to say image gallery expanded now
let's make another copy and
let's handle hi dot be s dot collapse
this event is raised immediately uh when
the height method is called so image
gallery is about to be hidden and let's
handle the other hide event which is
hidden dot B s dot collapse this event
is raised when you know the image
gallery is completely hidden so the
message is going to be image gallery
hidden let's save our changes and reload
our page and look at this when we click
the startle image gallery button you
know at the moment it's collapsed it's
hidden so it's going to show it when the
image gallery is is to be displayed
these are the two events raised show
immediately when the show method is
called and shown this event is raised
after the image gallery has been
completely expanded look at this when I
click this first we get the message
image gallery is about to be expanded
when we click OK the image gallery
expands and then we get this message
image gallery expanded now when we click
on the toggle image gallery button again
it's going to hide it and the two
respective hide events will be raised
and since we are handling them we should
get the respective messages look at that
image galleries about to be hidden and
when I click OK the image gallery will
be hidden and we get the message image
gallery hidden and when we click even
these two buttons you know this is going
to handle the to hide events so the
image gallery is already hidden so
nothing is going to happen but when we
click show image gallery look at that
image gallery is about to be expanded
click OK image gallery expands and we
see the message now when we click hide
image gallery image galleries about to
be hidden click OK
and again we get this image gallery
hidden
thank you for listening and have a great
day