00:00hi everyone in this video i'll show you how to create this accordion slider using framer
00:05without writing any single line of code you will find the free remix link in the description
00:10i'm Imran from Cyclotto and let's get started create a project then click this layer desktop
00:19click this layer to make it stack draw a frame name it container again make it layout set the
00:28width 1100 height 900 then scroll down radius make it 40 also change the fill color to white
00:39now click this desktop set the fill color f5 f5 f5 also you can add some padding here click here
00:47on
00:47top and bottom 40 we can also make it fit content then click here press t on your keyboard to
00:54add
00:55text paste this text select it click here change the font to enter display scroll down size 30 weight
01:05medium letter minus 0.03 again add text select it font enter display select both and wrap them in
01:15stack by pressing ctrl alter enter name it text content distribute space between select it and
01:24drop them in stack name it headline distribute start as for this name it sub headline change the fill to
01:34fixed
01:35width 280 click here change the width to fill draw a frame click here direction vertical press down around
01:46keyboard to position at the bottom like this set the width to position at the bottom like this set the
01:50width
01:50fill height 700 radius 40 make it layout change the fill color to this color right click on it
02:00create component name it accordion also change the name to desktop inside this variant draw a frame set the width
02:09300
02:11height 600 height 600 radius 40 overflow hidden make it layout name it one inside this stack draw another frame
02:22width fill height fill click this fill image and upload our image now let's create our button change the name
02:33to image
02:35and now set the height 40 we will change the width later just leave it like this scroll down change
02:42the color to this color
02:43radius 20 make it layout name it button type this text
02:50font enter display change the color to white again draw a frame here width 30 height 30 radius 15
03:05make it white layout drop it here upload our icon size 15 fill color this color name it icon you
03:17can use
03:17framers plugin to add icon go to the plugin browse all and search for icon enter and you can use
03:27any icon you
03:28like now click here now click here distribute space between add some padding 10 on right 10 on left wrap
03:37this button in a stack
03:39name it button and badge now draw a frame here width 80 height 40 make it layout remove its fill
03:50color add border
03:53color white white radius 20 now go to styles filters background blur set the value 20 type this text name
04:05it badge
04:07collapse it and drop it here now click this button set the width fill click this badge again add some
04:16padding
04:1610 on right 10 on right 10 on left perfect duplicate this layer name it to click here fill change
04:28the image
04:30click here we lock the aspect ratio by mistake so let's unlock it also from here unlock it then click
04:39here
04:40set the width 150 expand it click here visible no now click this button distribute center also click here this
04:51casual
04:52change the name to knit next duplicate this three more times and let's update the content
05:03now click here click here create a variant change the name to dx2 we can collapse it then click here
05:11with 150
05:13repeat this process visible no click this button distribute center click here with 300 expand it
05:25visible visible yes click here distribute space between also you need to change the name here so expand it name
05:34it three
05:35four and finally five next create three more barriers for these three images and repeat this process
05:53ç
05:54stab Erc
05:55stab
05:55stab
05:55stab
06:27Change the name to Desk3.
06:32As for this Desk4 and finally Desk5.
06:36Change the background color here.
06:50And now go to the first variant.
06:53This variant.
06:54Click here.
06:54Enter.
06:55Then select the parent layer.
06:57This layer.
06:58Then click this icon.
07:00Drop it here.
07:01Interaction.
07:02Mouse enter.
07:03Click here.
07:04Select the parent layer.
07:06Drop it here.
07:07Interaction.
07:08Mouse leave.
07:09Also click here.
07:12Drop it here.
07:13Interaction.
07:14Mouse enter.
07:14As for this.
07:18Mouse leave.
07:19And then click here.
07:24As for this.
07:47Now let's preview our project to see how it looks.
07:57Perfect.
07:58Click here.
08:00This container.
08:01This container.
08:01And add some padding.
08:0340 on right.
08:0440 on left.
08:05Yeah.
08:06Now it looks good.
08:07We can add some gap here.
08:10Maybe 40.
08:11Next.
08:11Let's make it responsive.
08:13Double click on it.
08:15Then.
08:17Click here.
08:19We can collapse it.
08:26Name it.
08:27Tablet.
08:28Set the width.
08:29630.
08:31Height.
08:32650.
08:33On tablets and mobiles.
08:35There's less space.
08:36So let's delete one card here.
08:38Click here.
08:39Click the delete button.
08:40Now select it.
08:42Set the width.
08:43250.
08:44Zoom in a width.
08:46Radius.
08:47Make it 20.
08:48Also here.
08:49Make it 20.
08:50Now click here.
08:52Remove this interaction.
08:54Width.
08:54100.
08:56Areas 20.
08:58Repeat this.
09:07Click here.
09:09Visible.
09:10No.
09:11Then click this button.
09:13Set the width.
09:14Fit content.
09:15Height.
09:16Fit content.
09:17Remove its padding.
09:19Then add a vibe.
09:20Repeat this process here.
09:23Set the visibility.
09:24No.
09:25Then click this button.
09:26Width.
09:27Fit content.
09:28Height.
09:29Fit content.
09:30Click here.
09:31And add some padding.
09:325.
09:39Now create three more variants.
09:44Change the name here.
09:49Finally.
09:49Tap 4.
09:53Click here.
09:55Width.
09:56100.
09:59Then remove the badge.
10:03Button.
10:04Also make it invisible.
10:05Click this button.
10:07Width.
10:08Fit content.
10:08Height.
10:09Fit content.
10:10Make it 5.
10:12Click here.
10:13This second image.
10:15Width.
10:16250.
10:18Button.
10:21Then click this button.
10:23Width.
10:23Fill.
10:25Again make it 0.
10:27Then click here.
10:29Set the padding.
10:2910 on right.
10:3010 on left.
10:31Click this badge.
10:32Visible.
10:33Yes.
10:34Maybe you can add some padding on top and bottom.
10:37Let's see.
10:375 on top.
10:395 on bottom.
10:40Now repeat this process.
10:42Here.
11:08Now let's connect the navigation.
11:14Select the parent layer.
11:17Drop it here.
11:18Interaction.
11:19Click.
11:19It's because on tabders and phones.
11:22We can't hover.
11:23Because they are tab based.
11:25So make sure to use click instead.
11:26Click here.
11:28Here.
11:29And drop it here.
11:34Also for this.
11:36Interaction.
11:37Click.
11:37Now go to the variant 2.
11:39I mean tab 2.
11:39Click here.
11:42Introduction.
11:43Click.
11:44As for this.
11:46Click.
11:47Click.
11:48Click.
11:49Click.
11:51Click.
12:37now let's change the background color here
12:47all right now let's give it a preview to see how it looks click here breakpoints tablet
12:54then select the container with 710 height fit content
13:03that looks perfect click our component it's already select tablet if not make sure to
13:09save the tablet now let's preview
13:17perfect finally let's make the mobile version
13:22click here change the name to phone set the width 350 now select the last one scroll down visible no
13:33click here set the width 150 and as for this 80
13:43remove it also here click here and remove the badge now create two more variants
13:53change the name to phone 2 as for this phone 3 click here now here with 80
14:08visible no button with fit content height fit content and add some padding 5
14:19click here then here 150
14:24visible yes click here 5 on top 5 on bottom
14:31we can also change the value here for consistency set the height fit content now give top 5 bottom 5
14:39perfect perfect finally for this get 80 then remove the text click here fit content fit content
14:54give overall padding 5 click here set the width
15:00scroll down button visible yes click here add padding 5 on top 5 on bottom also click here
15:11change the color to this color now select it change the color to this color now click here
15:18drop it here this two drop it here introduction click as for this drop it here introduction click
15:32drop it here introduction click
15:38finally for this drop it here
15:56now let's preview one more time to see how it looks phone width fill and click this text content
16:06direction vertical distribute center and now click here set the width fit content height fit content
16:17also you can set the width 350 and click here reduce the size as for this
16:2914 distribute center as for this width fit content and click here align center now let's preview to see how
16:40it looks
16:43yes it's working perfectly but as you can see we have some spacing issue here so let me see click
16:50this component
16:52maybe make it fixed and now let's see
16:56yeah it solves the problem take a little extra time to adjust the spacing
17:01and make everything look perfect my goal was to show you how to create this accordion
17:06if you made it this far i hope you enjoyed the video if you did don't forget to like and
17:12subscribe to the channel
17:13and that's all for today see you in the next video inshallah
17:22see you in the next video
17:24you
Comments