Up next in 10
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video you can create this
0:04
expandable collapsible widget inside
0:07
your react CH application so when the
0:09
user clicks on that button the panel
0:11
will show and you can toggle the
0:13
visibility so when they click it for the
0:15
second time then it also get hidden so
0:18
in this way you can make any element as
0:21
collapsible so when the user clicks on
0:23
that then the panel will show and the
0:25
information will show so there is a
0:27
specific package which allows you to
0:29
make this EXP expandable collapsable
0:32
widgets so actually the name of this
0:34
package is react collapse if you go to
0:37
npmjs.com and just search for this
0:40
package react collapse so this is this
0:44
essential package I'm talking about so
0:47
command is very simple this is a command
0:49
here I've already installed it
0:53
so you can even control the height as
0:56
well you'll see the slider is there they
0:59
have shown you
1:00
more examples right here you can control
1:02
the height width of the paragraph in
1:05
this way so a demo is available in this
1:10
website you can check out the
1:14
demo so installation is simple so I will
1:16
show you a very simple example so just
1:18
make a simple functional component and
1:22
then to require this package we simply
1:24
say the import statement and it have
1:26
this
1:28
collapse wiet which will be coming from
1:31
this package react collapse it's just a
1:34
10 kilobyte package you will see so
1:41
it after this right here we will have a
1:44
simple Boolean parameter in the state
1:50
variable and here the initial value will
1:53
be
2:00
you will use the UST State hook initial
2:02
value will be false and right in the jsx
2:05
we will have
2:07
actually a div
2:10
element you'll give it a margin of 20
2:13
pixel and you will change the phone
2:15
family and right just here we will have
2:17
a button and we'll
2:19
binding a onclick listener to this
2:22
button so when we click this button we
2:24
will execute this function toggle
2:26
collapse so right here you need to
2:29
Define this function
2:31
so once you click the button
2:34
here so based upon this variable is open
2:38
we will have this condition in the curly
2:41
bracket so if the value is true in that
2:43
case we will say
2:45
collapse or if the value
2:48
is false then we will expand
2:53
it so right here we will have this viget
3:00
and it actually takes a parameter which
3:04
is called as is opened it's a Boolean
3:07
parameter and you will be attaching it
3:08
to this variable that we
3:10
declared so it either is true or false
3:14
and if if the value is true then we will
3:17
show this actual
3:19
information so when the user clicks they
3:22
will show this panel it can be anything
3:25
it can be image it can be text anything
3:28
you can display inside this widget just
3:32
make sure that you have the parent tag
3:34
which is
3:35
collapse so we have this collapse
3:38
component we give it a is open property
3:41
it's either true or false and then we
3:43
Define our
3:46
content so we have this now button here
3:48
which toggle the visibility so if you go
3:51
to the
3:52
page and let's
3:56
suppose Local Host 5173 and we have this
3:59
but but and by default the text is
4:02
expand when you expand
4:05
it I think we do need to make this
4:08
function toggle collapse here we just
4:10
need to change the value set is open and
4:14
make it just the opposite value so if
4:18
the value is true then it will make this
4:20
function as false and if the value is
4:22
false then it will make it again to true
4:25
so now you can see it's make a simple
4:29
component
4:30
where if you click that element more
4:34
content will show collapsable
4:40
widget and make sure if you do want to
4:43
create some kind of
4:45
transition I have written this styling
4:48
you can
4:50
give in the app.css
4:55
so you can add this transition to this
4:59
class right here which is a built-in
5:01
class of this widget just add this code
5:04
and now you will see this light little
5:06
transition you will see so now there is
5:09
a slight little transition animation
5:10
which happens when you click the button
5:13
to actually show the collapse widget so
5:16
in this way you can use this module
5:18
specifically designed for react CHS
5:19
applications and they do offer a nice
5:22
little examples as well you can check
5:25
out their examples so thank you very
5:27
much for watching this video and do
5:29
check out my website as well free mediat
5:32
tools.com uh which contains thousands of
5:35
tools regarding audio video and image
5:38
and I will be seeing you in the next
5:40
video
#Programming
#Software