How to Build Apple’s Collapsing Toggle Footer

0:00:00
Hello Inner Circle, welcome to today’s video. I’m very excited because this is my first video for the Inner Circle and I want to say that I really, really appreciate the warm welcome you guys gave me during the announcement in the Inner Circle that I’m going to be coming on board to do some video tutorials for you. So I really appreciate that and I hope we’re going to have a great time together. So without wasting much time, I’m going to jump right into what we’re going to do here. I’m going to quickly bring up apple.com because we’re going to do something similar to what Apple has on their website. So they have a menu here. So you see they have a very long list of menu items, different headings, and then when you go to the responsive mode, it’s about 700, 760 something.

0:01:00
I think the other is a bit wider. The other is about 800. That’s when it’s not stacking. So you can see that it stacks here and then you could… This is collapsible. It just turned basically to some sort of accordion or what you would call a collapsible menu. So the heading, so you see just the heading and then when you click it, it’s going to expand and you have this icon here that indicates that this has been opened. These are keyboard accessible also, you know. So if you tap through it, you can open like that.

0:01:34
And this is what we are going to be doing today in this video. So let me turn that off. Alright, let’s see what did I do there. Okay, let me turn that off. So the first thing we’re gonna do is to set up the menu. So how do you set up your menu for something like this? I mean there’s no hard and fast rule on how to set up your menu for something like this. If you want to do it manually inside the builder, you want to build your list items inside the builder, fine. And I want to mention that this tutorial is kind of a general tutorial. It’s not limited to any kind of page builder. Even though I’m going to be using Bricks for this, you can do this in Oxygen, you can do this in any builder that gives you the appropriate containers, that gives you divs to work with, that gives you, most importantly, that gives you custom tags to work with. So because what we’re going to be doing will depend a bit also on custom tags for accessibility. So I’m going to go to the back end of WordPress. Now this is a sample of what I’ve already worked on.

0:02:40
I’m also going to show you that it’s going to work just like that. So what we’re going to have here is once we get down, ours is going to be like the regular 769 or so. Okay 768 from 768 Down down down. Okay, so below 768 we’re gonna have this and That is what we are going to be doing and in our own case. I’m gonna give you a bonus because unlike the Apple’s sample that we’re looking at, you don’t have the other menu items closing when you’re opening the siblings. But in our own case, I’m going to give you the option to choose whether you want to do it like that, okay, whether you want to close it like this or whether you want all of them to open at the same time. I mean, you could if you want the other siblings to stay open when you click one or if you want the sibling to close when you close the other.

0:03:39
So I’m going to quickly activate the other option. So now, right now when you open one of the menu at least and then you go to open the other, the other one closes, okay? So what I’m going to do is I’m going to turn that off temporarily. So now I’ve turned that off. So what is going to happen now is when I click this, I’m going to refresh that. I think I will refresh that. Yep. So let me refresh that. So when I click this and then I click this, so it stays open just like the Apple zone.

0:04:22
So we’re going to have the option of turning on and off depending on what you want, what is your preference because some people just prefer it this way. Just keep everything open until I close them and some people prefer it the other way. So this is the outline of what we’re going to do. The first thing is that we’re going to set up a menu and then once we finish setting up a menu, we’re going to go into Brics and then set up our footer template. We’re going to build our footer. We’re going to build the structure or give the necessary classes that we need. And once we’re done with that, we are going to write the JavaScript that is going to control this action, this collapsing and expanding of the menu alongside writing the CSS because we’re going to be doing it alongside. We’re going to see how it goes, whether we’re going to finish writing the JavaScript or we’re going to finish writing the CSS. Either one, you could do any one phrase, but as we go along, we will do as it is necessary.

0:05:20
The first thing we’re going to do is set up a menu. What you’re going to do is, the method I’m going to use here is, for you to have this, of course, you’re going to have different menu items. What I did in my sample is that I used just one menu and I duplicated it. But in this tutorial, I’m not going to do like that. I’m going to show you now that you will have to create separate menus for your entries. Okay, so I’m going to create a new menu. And then I’m going to call this menu 1. I’m going to create that menu. And I’m going to add features. So I’m just going to add 1, 2, 3. Like I can add any amount of, any number of these items I want.

0:05:56
I’m going to save that. And then I’m done with that. I’m going to create a second menu. So I’m going to do 3 menus. Okay, I’m going to just say Menu 2. I’m going to create and then I will add maybe other items that are not in the other one. Then I’m going to save and then I’m going to create a third menu, Menu 3. So this is what you would typically call maybe your services, services or entertainment, Apple Store for business, okay? And then I’m still going to add what I’ve already added before. We don’t have a lot of different stuff. Okay? So I’m just going to add. So you add what you want to add.

0:06:43
Okay? I want you to take note. Don’t go about doing stuff that you’re not supposed to do. Okay. These menu items don’t have, they don’t have child elements. They don’t have child menus. So, these menu does not account for menus which are, as a matter of fact, you shouldn’t be doing that. You shouldn’t be putting menus that have children in the footer. So, you don’t have a drop down. It doesn’t make, I mean, I don’t think it makes sense. Okay. So, you shouldn’t be doing that. So, when you’re putting it in the footer, you know that you are not going to put the children. You’re just putting the menu. If they have children, you probably just bring that out, you know, as a separate menu item and label it and create a menu for it. So we have our three menus. I think I’ve saved this. OK.

0:07:31
So now we’re going to jump into Brics. So what I’m going to do is to I’m going to go to templates and then I’m going to create a new template. So I’m going to create a new template and I want to call this template Apple footer menu. Okay and then I’m going to select the template type to be the footer. So that is the footer. Okay so we have the option to insert you know any container you want to insert and start building your footer. The first thing you want to do of course in bricks typically when you are building a template is that you want to go into settings, the template settings and then apply a condition where that template is going to apply. Okay, where that particular template is going to apply. And so what I’m going to do is I’m going to quickly go back because I don’t want it to apply everywhere and just create a dedicated page for it. So I’m going to add a new page and just going to say Apple footer tutorial. Okay, so I’m going to create that page and publish it.

0:08:51
Then when I go in here, I think I should just refresh this. So I refresh that so I can get that page going. I’m going to come in here and Template Settings, Condition. I want this to apply to just an individual page and then that individual page I want it to be Apple Footer Tutorial. And then I want to… I don’t want to populate content, okay? So because I really don’t need the content to be populated. Let’s see. Let me just populate content.

0:09:23
I’m going to just go to single post. For now, I’m not going to populate content, all right? I’m not going to populate content. I’m just going to leave it like that and then I’m going to save this. So this footer is going to apply to just one page for now. So the first thing when you want to create a footer, I just want to mention that it’s not just the menu. It’s not just this feature we’re going to look at. We’re also going to look at some of the best practices in a couple of things. As we go along, we’re going to look at best practices in a couple of things that we’re going to build.

0:09:58
The first one we’re going to look at is how do you create your footer. Now I know that all of you are in inner circle and you have a lot of you are using frames which just takes the burden away from you. But a couple of people, but it’s good to just know how to do it. Just in case for some reason you need to build your footer by yourself. Just for any reason, you just need to know the right thing to do. So I’m going to add a section. Now when you add a section in the footer, let me save it and then I want to go to the front end and then take a look at the markup. So I’m going to hit F12 to bring out the inspection tool, the browser inspection.

0:10:43
And then you see your footer is right here. And that is good because you have your proper semantic HTML so you have your footer for that HTML. Then when you open it, you’re going to see a section and then you’re going to see the container. Now it is not appropriate to have this section here because you do not need a section for what we are going to do. Now is it wrong to have a section in a footer? Not necessarily because in footers you can have what you call sectioning elements. Sectioning elements could be a nav, it could be a footer, it could be an aside, etc. These are elements that you use in sectioning certain things in your footer or in any other container. So how do you know if you need a section on or not?

0:11:30
In your section, there is nothing for us to section here. There is really nothing for us to section. So we are just going from the footer, you know to What is in the footer? So we’re not sectioning anything therefore We don’t need to have for example in the Apple footer. They have now take a look at their footer They have a footer here and that footer they have something else here and they have something else here now They have a whole lot of bunch of text here. If you notice that in that they have a section, you see, because they want a section, you see there’s a footer and then there are sectioning elements, which is the section, the nav is a sectioning element, the aside is a sectioning element, they don’t have a side here, but they have a section. But the problem with what they have here is that a section is supposed to have a heading element, so they probably should have had a heading element. This is the one thing that wasn’t properly done not having a heading element in the section because you should have a heading element in the section. Okay so but I’m showing you a typical example of why you want to have a section but if you’re just going to have your you know your nav okay or just a div which contains your nav then you really don’t need a section.

0:12:51
So we’re going to go back and then we’re going to go to that section and we’re going to change that tag to a div. Now one thing to notice that when you change the tag to a div, you’re going to lose the section styling, especially, now let me close that, especially if your styling came from maybe a framework like Automatic CSS. You can see that Automatic CSS controls the padding and it applies it to the section. So once it loses the section padding, it loses, when it loses the section tag, it’s going to lose that padding but you have to go in and add that padding again. So if you’re using automatic CSS, so you can just go into that footer. Now I’m going okay so I will append inner circle IC okay to any class I want to use okay so I call it inner circle footer and then I’m going to go here and then I’m going to add the padding okay so I want to add the pad so I’m going to add the section padding I think it’s called section space okay section space space M. So I have my padding back and just going to copy that.

0:14:07
So this is ACS. I mean I assume that everyone here uses ACS, right? So if you are not using ACS for some reason, which is hard to believe, you just put your values here. So I get back my, you know, the section padding. Okay, so for these, I’m just going to put 20 because basically it’s usually 20 because you’re going to lose the right padding. You’re going to use the variable. I think it’s called section padding X. That’s for the X. That’s the left and right padding. So section padding X. padding x. So I think, yep, I think that gives me that. I don’t have that if I take away 20 from here, no padding. So section padding x from ACSS. So it gives me that, you know, see that padding. All right. So once you do that, it’s time to drop in a div or a block.

0:15:19
So I can easily just go here and just put in, maybe I want to do three because we created three menus, right? So I’m going to drop it here. And then of course, if you use that method to drop in the columns, now notice in Brics, columns are exactly the same as blocks. So there’s no difference. The only difference is that once you drop them in as columns, the container is going to automatically be applied the flex direction like so, horizontal row. Okay, so you want to take that off because I want to use grid. So I’m going to go to display. I’m going to change that to grid and then let’s leave the gap for now and then for our grid template columns, I’m just going to use ACSS class grid 3 and then that gives me a 3 column grid.

0:16:13
And then I’m going to go all the way down here to 767 and just use grid 1. Now if you are using ACSS and you do not know that you could just type grid1 and press Enter to give you that full, that shortcut that I just did, I’m just telling you can do that. Let me quickly show you how to do it. So I’m just going to go to ACSS, then I’m going to go to Options, Builder Settings, Variable Expansion and Validation. So turn it on under Options, and then you’re going to have the ability to just type out the name of the variable, just the name. So grid1, I just type ____grid__1. So that’s the name. So when I press enter, it just completes it. That’s a really cool feature and I really like it. So let’s go back here. For now, I’m going to delete this too because I want to work with one and add the necessary classes and then style it.

0:17:16
So this is going to have two classes. Now, the first class is just going to be the general class for the footer. So you want your IC footer to have columns, okay? The class for the columns that is just for general styling. And then the second class I want to add to it is going to be the class that we’re going to use in controlling the expansion, the collapsing and the expanding. So I’m going to call that ICWillExpand. Alright, so that’s the class I’m calling that. I’m calling it WillExpand because I’m going to use that class in the JavaScript. So the next thing is to add the heading for the menu. So I’m going to just add a heading element.

0:18:02
And that heading, depending on the importance you want to give the headings in your menu, you could use H2, you could use H3. So I’m going to use H2 for mine, but I don’t want it to be this because I’m going to give it a class of IC footer title. So that’s the footer title and that I’m going to use that class to give it, let’s say, textM. And that is just how big I want it to be. The first one is going to be my menu1. And I’m going to go ahead and drop in the menu. The regular nav menu, that’s what you want to drop. So you drop in the regular nav menu and then I’m going to give it a class of IC Twitter nav.

0:19:01
And so top level, I want to change the alignment to vertical and then I’m going to remove this right margin here and then the padding, I’m just going to give it, let’s say, maybe 1 rem up and down. So that’s about the space I want for it. If you need more space, you could just make it maybe 1.6, okay, up and down. So I think this just has to do with how you want them to be spaced out. And the reason you want to give them margin, sorry, the reason you want to give them padding and not margin is because you want to increase the clickable area. So don’t space them out using margin because let’s say I move this. If you space them out using margin, you have reduced, you see, the clickable area. You see, when I move here, between here and all the way to here, there’s nothing to click and it’s not a very good practice.

0:20:03
So you want to give enough clickable area. One of the rules of accessibility is that you want to give enough clickable area for your list item, for your links, okay? So you don’t use margins to separate them. You use padding. So even if you want to give a little space between them, make sure that you use padding to give them enough clickable area between the two. So let’s say I just want to separate it by 5 pixel, okay? Up and down, okay? So I can reduce this to 1.4. So even if I have a little bit of space in between, you see, I still have a lot of clickable area before that little space comes in. You see where the cursor changes is where that space, you know, is. Okay. Well, we’re going to change the color so the typography is going to be black.

0:20:53
Okay. So basically that’s it. Did we remove this? Yeah, I need to take that off. I did. I removed that. I mistakenly cleared it. Okay. So I don’t want to style it further than that. Let’s not waste time on the styling. Now, the next thing we’re going to add is, now at the lower breakpoint, we don’t want to see, we want to have a button because at this, now what we’re seeing here, you see what we’re seeing here is not a button, it’s just a text. But what we are seeing here at the lower breakpoint, you see shop and learn, shop and learn, okay? What we’re seeing here, this one now is a button. So we want to add a button also. So let’s go in. I’m going to duplicate this heading. Now, at this point, things might begin to get a bit tricky because first of all, you still want to have a heading in your mobile, right? Good. So, I have that heading but I don’t want to use just the heading.

0:21:58
Okay? So, what I’m going to do is I’m going to wrap it with a div. I want this to be my button and I want this to be my heading. So I’m not going to use a heading tag. So let me just delete that. Okay. And I want to just put a regular basic text there. And that basic text, I’m still going to give it the name of menu one. I’m going to apply the class of the footer title to it also now to give it the same IC footer title. So I wanted to have the same font size. But if you notice the Apple zone, it is not bold. But in my example, mine was bold, the one I did here, it was bold. But I think we’re going to go with the way Apple does it. So it is not bold here. So I’m not going to make it bold but it is still a heading. So if I come here and click here, you can see that it is a heading. You have a heading there and you have a button inside the heading which is okay. It doesn’t break any semantic rules to have a button nested inside your heading character.

0:23:19
There’s no rule that says you cannot do that. You can’t do the other way around. You can’t have the heading inside a button. That would be wrong. That would screw up the semantics. But you can have a button inside the heading. So let’s go and see. So how are you going to place a button inside a heading? All you need to do is to use custom tags. I’m going to come here and I’m just going to call it my heading button and then I’m going to go to the tag and choose a custom tag and then I’m going to give it the same h2 as that.

0:23:53
As you can see that it quickly changes the text that is inside there. Now it would be okay to just take this class from here and then add it here. Put a title. But if I want to make this different, I could add a modifier class and then just gonna take that away put that and then just modify it to make it let’s say BTN okay BTN text so that’s for the title is like the bottom text you know it’s gonna be the one for the bottom text also which is gonna have the same text font size as the regular one, but it’s not going to have the same boldness. So I’m going to go into the font size. I’m still giving it this text M, but the boldness, I’m going to take it down to 500, but the regular boldness is 400. So let’s just make it 400. So we see we have the regular boldness as the others. But it is an H2.

0:25:20
And then this is the basic text, which is going to be a button. So what I’m going to do is that I’m going to come to the tag and change this to a button. But the button has a predefined style. So you can see that something changes here. So what I’m going to do is I’m just going to add this ICUDA button. So we have that as a button. For that, I’m going to go into this custom CSS. I’m going to write root, which refers to that button, and then I’m going to just say background transparent. So what the button does is it adds a background.

0:26:09
Okay and then it also usually adds a border. So I’m just going to say border none. So we don’t have a styling. I’m going to save this and then let’s go to the front and check what we are doing so far. So I’m going to open this. Let’s look at it now. When we come here, you’re going to see that we have an H2. So you may not have known that you can change any elements into an H2. That is a part of custom tags and it works perfectly. So you have your button, okay, with the text, button, and then a text there, and then you have the H2 with a button inside. And then you see, you can see now that you have that pointer. And the reason you want to have a button, if you now if we did not have a button, will our effects still work? Yeah, we’re still going to be able to do the expanding but you will not be able to focus with the keyboard.

0:27:02
That’s the first thing. You will not be able to focus on the keyboard and neither will you be able to activate using the enter key, you know, to activate whatever you want to activate. So the button gives us a very solid start at accessibility. So I’m going to just close that. So now let’s begin hiding the things we don’t want to see on the desktop. So for this, this footer title, we don’t want to see it here. So at this break point, we’re going to go to Layout and we’re going to go to Display, None. So we don’t want to see display none. Okay, so we don’t want to see that we want to see it here so it’s here but not here. But for the bottom, I’m going to select the heading, the whole of this. I don’t want to see it at the desktop. Okay, so I’m going to go to layout and then under miscellaneous you find out that there is no display property here for these. I’m not quite sure why there is no display property. I think for some reason it’s because we’ve changed this tag. It’s a custom tag. So that property doesn’t show.

0:28:16
But what we’re going to do is to use visibility hidden. So with visibility hidden, we’re not going to see it at this breakpoint. But when we come to this breakpoint, visibility, visible. So we’re going to see that this breakpoint. Then one more thing, check out that menu. You can see that it collapses to mobile menu. We don’t want that. Let’s go to the desktop. And then I’m going to go to the settings and then show at breakpoint. I think I’m going to choose never. Let’s see. So never, make sure that it stays as a regular menu and not as, it doesn’t collapse to become a mobile menu. Now another thing I’m going to do is to go to the style and then I’m going to make the width 100%. The reason you’re making the width 100% is because at mobile, you want to be able to click it even from here, okay, because you don’t want it to stop here.

0:29:08
You don’t want to move your hand all the way to the center or to the right or to the left to be able to click your menu. You want the clickable area to span across the whole width. So you make it 100% of the container. So having done that, we have a structure we can work with. So let’s continue giving the rest of the classes. So for the menu, we’re going to add one more class to that and we’re going to just change it to button. Now for the button itself I’m going to give it a class of IC will expand. is that I’m giving these classes to control the things that we’re going to use for that effect and giving this class as a general class for styling. But this is going to be used for the JavaScript and the CSS. I like separating them so just in case I need to take off this class, I need to change the class or anything, so I would like making them separate. I like separating the class I want to use for JavaScript function from the class that is meant for general styling of the element. So I’m going to save that.

0:30:32
And for this one I’m going to also give it another class called ICWillExpand. I’m going to call it. Now what did I write here? I wrote here button text so this was the modifier class for the title class and this is the one we’re going to use for our effector in JavaScript and you know the CSS that’s going to control all the functions that we need. Okay. Okay so now we’re going to go to the front end and then see we don’t see our button here, but when I go to F12, let me change this to responsive. You can see now we see our button, all right? So we can, you see, it’s clickable. Now, the next thing we’re going to do is that we’re going to add an area control level to the button.

0:31:33
So what this button is going to control will be the nav menu. Now if you go here and then and you check, you’re going to see that this nav menu, this nav, you know, this is the nav, okay? And what this button is going to control will be our nav. We want the nav to collapse and expand. So we’re going to add the area control attribute to the button. Now the area control attribute determines it shows which element the button you know is controlling so that button is going to be controlling this element is going to control the expansion and you know the collapsing and expanding of this element now the area control attribute takes the ID of the element it’s controlling so we’re going to give this an ID okay so I’m going to change the ID of this so you just come here to rename element ID and we could just copy this okay but it’s always good to give it an ID that is readable so I’m just gonna call the I’m gonna give it an ID of IC footer underscore underscore menu dash one because this is gonna be a menu one okay or we could just call it nav1. So it depends on what you want to call it. So nav1 or menu1 but I’m just gonna leave it as the undo. Yeah my hobby hasn’t screwed up that thing. So I’m just gonna call it IC footer menu-1. So that is our menu. So I’m just gonna copy that ID. I’m gonna go to the button and I’m going to go to the attributes and then I’m going to add ARIA controls and then I’m going to put that. Now you won’t put with the pound symbol, okay? So you just put it like that and then we’re going to save it.

0:33:31
And then once you go to the front end and take a look at our button, you see we have a button with ARIA controls, IC footer menu one. And then for the footer menu, you see we have these as our control, IC footer menu one. Normally, ideally, we should have given that, these should have been the ID. And to have the ID of, because this is actually what is going to be expanding. To have the ID of this, I don’t know why Bricks doesn’t give this ID. Maybe it’s somewhere in the settings. Okay. Somewhere in the settings. So this should be menu. Okay. You know what? Let’s check something. So we haven’t actually chosen a menu. All right. So let me choose the menu one. Okay. I’m going to choose menu one. I’m going to save it. And then that is what we did not do okay because we just assume that oh there’s a menu remember we had to choose a menu so let’s go back and see if so yeah so bricks we have yeah that was refreshed let me just double check so we have that we have that menu menu class that we gave so the you are done ordered So the UL, the unordered list is what has the menu1 ID.

0:34:56
So the nav doesn’t have an ID. So that explains why we had to place that ID here at the parent element. Even though the nav actively will be what is going to shrink and expand, but it’s still okay to say it controls this because this contains the element that shrinks and expands. So basically, this is going to shrink also and expand. Okay. So let’s go back. So what we’re going to do next is, is to just start, you know, we’re going to start writing our JavaScript. So we’re going to go back here and I want to write this JavaScript on the console so that you can see, then we’re going to transfer it to a code element.

0:35:34
So I want to write this JavaScript where the element is still showing. Okay. I’m going to go to the console and let me just clear whatever is there and then we’re going to start writing our JavaScript. But on a second thought, I think we should write the CSS first. So what we’re going to do is this, is to write the CSS for the expanding and the collapsing. Okay, all right. So the first thing is I’m going to go to the inspect now. So to open a CSS, to be able to write a CSS inside the inspector, you click here and then it’s going to just put a selector, the one that you are currently on, which really doesn’t matter, and then you click and it’s going to give you a place to write the CSS.

0:36:20
So what we are going to do first, before we write that CSS, I’m going to select this. You see this, the footer menu, okay? That wrapper that wraps of the nav, which is this element in Brics, okay? And then, so let’s go to the source where you have this style sheet. And then I’m going to just expand-menu. Remember that was the class. So the class for that div is IC will expand underscore menu. Okay. And then I’m going to first thing I want to do is to display it as grid. I’m going to quickly check the nav elements because I want to write some CSS for it. Now this is called BricsNavMenuWrapper. Okay. So I’m just going to copy that. And then I’m going to come here and just paste that. Okay. But I want to only the one that is for this, the child of that.

0:37:25
Okay. So this is the IC will expand menu. This is supposed to be underscore. Okay. And this is supposed to be underscore. Okay. That was the BAM class that we use. Let’s see. All right. So it was like that. So that was a mistake. So that displays grid. Okay. Now, notice that this is the parent to this menu wrapper, this nav element. So let me just give this nav element a background because And then I want to give it an overflow of hidden so that whatever happens, anything outside of it is not going to show. So now for this I’m going to say grid template rows. Let’s start with making it zero. So we make it a grid template row of zero and then we don’t see anything because this basically just shrinks all the way to zero. Now if I make it grid template rows 1. Now remember we have to put fr so even this zero we have to put fr okay. Now you can see now that it grows okay so if I if I comment that out you see it disappears if I undo it grows. Now let’s see what happens when I add a transition to it. So I’m going to give it a transition of 0.4 seconds. So let’s comment this out. So you can see it grows. So that is the expanding and the collapsing.

0:39:15
Alright, so now I’m going to take this off. Let’s leave it that for now. What I want is this. Now, we’re going to go to the parent. For this, we’ll expand. Now, this will expand and then I’m going to come here to where you have class. I’m going to add a class. I’m going to call that class Expanded. That is a new class. So I want that class to be there because this class is going to be added by JavaScript. So we are not going to add that class in the builder. You can actually add a class in the browser inspector tool like this. So what I want to do now is I’m going to copy the whole of this, and then I’m going to delete this. Then I’m going to go to here and then I’m going to paste that now. Let’s delete the whole of this and this. So now what I’m saying is that when the class of expanded is added to the parent, then we’re going to have the grid template rows to one fraction. But if it is not added to the parent, we’re going to have a grid template row of zero. Okay. So this element, this IC will expand menu will have a grid template rows of zero or one depending on if this class expanded is added to the parent. Let’s go back here. I’m going to uncheck that class. You see the parent doesn’t have that class. So it defaults to grid template rows of zero fraction. Okay. And then when it’s added, you see expanded, added, expanded, removed, expanded, added, expanded, removed. So what we’re going to do is to write a JavaScript and when we click this button, the button that we have here, this IC will expand, will have a class expanded, added to it and then when we click it again, it’s going to have that class removed from it. Okay, so let’s go back there and continue writing. But on a second thought, I think I would like to call this least expanded.

0:41:19
Okay, so let’s go back and just update that. So I’m going to remove that and just call this least dash expanded. All right, so that, that, okay, so that works. So it makes more sense. You know, sometimes you want the class name to have to make a little bit of sense. Least expanded, not just expanded, but the least has been expanded. All right. Then another thing we’d notice here is that once you expand it, it doesn’t have a border bottom when you expand it, but when you close it, it has a border bottom. Okay, so let’s do that now. It has a border bottom. That is the bottom. Okay, the bottom. So the bottom will need to have a padding. That padding I think I would like to give it inside the builder, right? The bottom class expand button. Alright so that is it. So what I’m going to do is I’m going to give it a border bottom. Border bottom of solid one pixel. I’m just going to give it a gray color. So we notice off the bat what the problem is here. Okay so we only wanted to have that border when it is I think when it’s expanded let’s go back to see yeah no when it is not expanded all right so when it’s expanded no border so I’m gonna say not so we don’t want it this to happen when it is expanded.

0:43:16
So not least expanded IC. Okay. So now you see, it doesn’t have that, but if we go and take away that, you see it has that, it has that border under it, and then it doesn’t have that border. So I’m going to go ahead and take away this background that was temporary, and let’s see what happens. So I’m going to go back here and then you see it has that border it doesn’t have that border. So what I’m going to do is I’m going to just label this as a expand and collapse list items. Alright and another thing I want to do is that I want to wrap the whole of this CSS in a media query and we want it to apply at a maximum width of 767 pixels.

0:44:06
So I’m just going to say, at media, max width, 767 pixels. So we’re going to use CSS for that too. And that is going to be added. We’re going to add that on the title. Okay. So this is the title. Okay. IC footer title. I think we had another class there. Didn’t we? Oh yeah. So that is the problem with BricsUNDO. So it might have undone that title that we had. We had a class called IC will expand title. We had that class. So those undo’s that I did, just one undo that I did cleared out the whole thing, which is one of the bug in Brics Undo system. Let’s just copy this. I’m gonna just copy cut this, so I can have that CSS.

0:45:35
I want to use this opportunity to increase the width of the button. So this is the button. I’m going to increase the width to 100%. Now, it’s not just the button we’re going to increase the width. I think we should increase the width of this. So, we see it here. So, let’s just do it from here. Width 100%. And the button, we’re going to increase the width of the button. So increasing the width of this title, okay, we’ll expand title. But I said I don’t want to style it with this class. I want to style it with this class.

0:46:11
So width 100% and then this, we’re going to also style it with this class, okay? A width of the button is going to be 100% because we want to be able to click at any level that we are. I mean any screen size, any point. And then for the button, we’re going to give it a padding. So for the padding on the button, I’m just going to save that and then I’m going to go back to the front end. So we can see that, let me just use, do like this. You can see that I have enough space on the button, okay? Enough space to click. All right. So I’m going to go back to the source, to the custom CSS, the same way I did the other one. Then I’m going to paste back my stuff. What we need to do now, now we don’t have that class to expand this, so JavaScript is going to take care of that.

0:47:28
The next thing we’re going to do is to create the icon. I’m just going to comment that, toggle icon to create it. So the class we’re going to target is the title class. So the IC will expand okay title before okay and then comma we’re going to do for IC we’re going to do before and after. IC will expand after After. And so the first thing we’re going to do is the contents is usually that.

0:48:14
That. Okay. So I’m going to set a width of say 10 pixels. I’m going to give it a height of say 2 pixels. color of black. So we are not seeing it. So if I just write hello here, you can see that there’s hello there. Okay, so the before and the after is not showing up. Let’s try z index. So if I give it a z index of 5, 4, 3, it’s really not showing up. So what I want to do is, I want to position it. I want to position it. Because there is a button there, so maybe it’s sitting behind that button for some reason.

0:48:57
So I want to target the IC, we’ll expand title, and then I’m going to position this relative. Then for this, I want to position it absolute. So you can see they show up. Okay, you can see them. They show up. All right. For both of them, I want the left position to be 100%. So both of them are there.

0:49:30
And the right, the top, sorry, I want them to come down by 50%. Okay. Okay, now normally there’s a way you properly center stop it because of the width of all the height of these elements is so small like two pixels, using 50% is just enough to deal with that. So to make it across for the after, so let me just copy this, it’ll be better. I see this expanded title, after. After. So for the after, we’re going to rotate it. Transform.

0:50:15
Rotate. 90 degrees. So you can see that it changes to the plus sign. Now, what I want to do is, when I add a class of expanded, okay? So let’s go back here to that wheel expand, okay? So that is the wheel expand and then I’m going to click here and add that class again, lease expanded, okay? See, I’ve added that class. So anytime I do that, okay, so when it’s open, I want it to rotate to form an X just like this. So when it opens, it rotates to be an X. When it closes, it turns back to the plus. So I’m going to go back there and then I’m going to say, least expanded this.

0:51:09
So the this, now the after, so when the least is expanded, the after is going to rotate 45 degrees. So now we have 45 degrees there. And the before is going to rotate, is going to rotate a negative, the opposite direction. Okay. So now let’s go back. And then I’m going to toggle that class, you can see that it’s rotating. Okay? So we have to give it a transition duration. That’s the before and the after. So I’m going to give it transition, transform, 0.4 seconds. So now we go here and expand. You can see that it’s slower. You can see. All right. I mean, this thing is moving up and down, so you may not be able to see properly.

0:52:07
Okay? All right. When we’re finished, you’re going to see it. All right. So now, I think we’re done with the toggle CSS. And that’s about all the CSS we’re going to write for this effect. So I’m going to copy that CSS. All of them is going to be inside the media query so let me just move it inside the media query. Let’s check if it is still working.

0:52:40
But I don’t like the way this, I want it to sit on the line. You can see that this sits on the line, we will have to do some calculations. Let’s see. So the left position is 100. So I’m going to do it, Calc, 100. I’m going to subtract 15 pixels from it. So you see, it moves in to sit on the line because I’ve subtracted. It’s 100, then I subtract 15 for me to bring it back in to sit on the line. So I’m going to copy that and then I’m going to go to my Code Manager. Then I’m going to add a new code.

0:53:40
So I want to add the CSS in the header. Now you don’t have to add it in the header. Now when you add a CSS in the header, that CSS acts as what you call critical CSS because it loads just before the content loads. Now the reason you want to add CSS in the header typically is if you don’t want a flash of unstyle content. But what we are doing here in a way, if you refresh your mobile and you are at the footer, there’s a possibility that you might have a little bit of flash but not necessarily. But this is not the reason I’m putting this in the header.

0:54:19
The reason I’m putting this in the header is because it’s the only way that allows me not to switch between JavaScript and CSS code blocks here. Because I’m going to be able to put the JavaScript in the footer where it should be, okay, so I want to be able to switch between these two tabs. But if you’re doing yours, please, please take this and put it in the regular CSS where your CSS is supposed to be loaded in the footer so that, I mean, this is not significant CSS to block the rendering. So for me, I feel this is safe. But if you have concerns, put it in the footer, but I can’t put both in the footer at once.

0:55:01
I don’t have the ability here to put both of them in the footer. Okay. So I’m going to publish this. And let’s go to the front end. And then I’m going to refresh that. Okay, so I’m going to refresh this. So I refresh it and we still have this. Now, our function is no longer working because we need the expanded class. Okay, we need the expanded. So we need that expanded class to be added to the parent div.

0:55:31
So I’m going to start writing the JavaScript now. The first thing we’re going to do is we want to select this element, that parent div. And that parent div is the IC wheel expand. So let’s go to the console and then we’re going to select that element. So I’m going to write constants, that’s a variable. I want to assign, I’m not sure why all that is coming out. Now menu wrapper, I’m going to call that menu wrapper. It’s going to be document. Now, forget this thing. It has nothing to do what we’re doing. Documents. Now, what we want to do first. Now, for those of you that don’t know JavaScript, I hope that as time goes on, one of the tutorial I’m going to do for the inner circle is just to do introductory JavaScript for page builder users, because there is just a certain level of JavaScript you should know.

0:56:25
I mean, you don’t have to be an expert in JavaScript. I’m not an expert in JavaScript you know so I want you to be able to know just as much as I know just a little but you I mean while you know striving to learn more you should know just a little to be able to do basic things with JavaScript while using a page builder because the page builder is not going to give you all the tools. Even bricks interaction is not enough to do the things that you want to do. Okay but maybe for this you could use Brics interaction but you’re gonna see why you can’t. You are not gonna we shouldn’t use Brics interaction because it’s gonna be too cumbersome very difficult to manage but if you write JavaScript it’s very easy and straightforward to manage. Alright and there are a couple of things that interaction cannot do. Okay and you would need to just write it out in JavaScript that’s why it is still beta.

0:57:16
All right so now what we want to do is that we want to take this wrapper okay the whole of this wrapper and we want to store it in a variable okay and to store in a variable we created a variable called menu wrapper and to store it we’re going to put that query selector inside a comma. Okay. The query selector will be IC will expand. So that is the class. The selector is a class and it is IC will expand. now write menu wrapper and press enter. Sorry, menu wrapper. Okay. You can see that it’s highlighting that, you know. So you can see that it brings, it just, you know, echoes or logs that menu wrapper. You can see everything is right there, right here for you to see. Okay. So we have stored this in this variable, menuWrapper. But this stores just one. So we don’t want just one. So I’m just going to copy this out.

0:58:36
I’m going to refresh the page again because I think that is a mistake. Because we had just one on the page, I just threw it, querySelector. Now, we’re going to have more than one of them on the page when we duplicate our menus. We’re going to have query selected. So it has to be query selected all. Okay. What I want to do is I’m going to loop through each of them. So I’m going to say menu wrapper.forEach, then open and close this bracket. Here I’m going to add another variable for each of them. So you’re saying.forEach. So we’re going to declare a variable for each. So that variable we’re just going to call it wrapper. Okay. Now, so for each of this, what it’s saying is that for each menu wrapper, create a variable for each of them. And that variable should be wrapper. So each of them has, all of them collectively have the name menu wrapper, stored in a variable menu wrapper. But for each of them, we’re going to use in applying whatever you know you say if you want to apply. So we’re going to use the arrow function and and just this is just the structure that that you know takes. So everything that we want to write for this is going to go in here. So for each of them we’re going to create a variable called menuToggleButton.

1:00:07
And that is going to be this wrapper for each of them, wrapper.querySelector. Now you know that we’re going to have many buttons, but because we are selecting it for each of them, so for each, select. So what you’re saying is that select the button that is in each. So each wrapper selects your button. Okay. So we can use, we’re not going to use all, we’re just going to use query selector because each of them is selecting their button. We’re not selecting all the buttons at once. So for each of them, select a button.

1:00:37
So we have just one button in each of them. So these many toggle button is this button. Okay. So this button is going to call, is called IC will expand button. All right. We’re going to go there and that query selector, open close and then it’s going to be.IC will expand button. So we’ve selected that and started in the menu toggle button. The first thing we want to do for the button is to set an attribute that they, you know, once you land on the page, the area expanded attribute is supposed to be false. So we’re going to say menu toggle button dot set attribute area expanded or false because all of them will not be expanded by default. So this is for accessibility, okay?

1:01:51
That’s the first thing we’re going to do. So that’s the first thing. Make sure that all of them have an area expanded or false because none of the menu is expanded yet. And then we’re going to add a click event listener to the wrapper itself. So for each of them, when you click, what do you want to happen? Wrapper.AddEventListener. So open and close. Then inside there, we’re going to write click. And then we’re going to write a comma.

1:02:21
Open and close arrow function. Open and close. And then, so that’s the structure. So we are saying add event list now, add a click event list now. So what we’re going to do is that the first thing we want to, when you click, we want to add that class of list expanded to that wrapper. Wrapper.classList.toggle. Now the reason we are saying toggle is because we just don’t want to add and then remove. Okay. We don’t want to say classList.add because we want to toggle it. Toggle means when you click the first time, if it is not there, add it. When you click the second time, if it is there, remove it. So we want to toggle this class. List, expand it. Remember that class we’re playing with? Now you could use both double quotes and single quotes. Okay.

1:03:09
So I’ve used double here. I’ve used single. I think it’s consistency. Just stay with one. So far I’ve used both of them but they will both work. But I should have stayed with one. So for now I think I’ll be staying with the double. Okay so let me just do that. Least expanded. Okay so make sure that your spellings are correct. Now when you add the class of least expanded, it means that the list has expanded. So that means this menu toggle button needs the array attribute to be set to true. Okay but because we are toggling this, you know, we are toggling it, you can’t just say set it to true. Because if you say set it to true, it would indefinitely set it to true. So when you click and it expands, it’s going to set it to true. If you click and it collapses, it’s going to set it to true. So we want to set it to true based on if the wrapper has this class. Okay so we’re going to say menu toggle button dot set attribute aria expanded now we want to set that attribute now if we say we want to set it to true, it’s going to be true.

1:04:29
If we say we want to set it to false, it’s going to be false. But then we want to set it to true or false depending on this. So now, I’m going to write a statement. I’m going to say wrapper.classList.contains list-expanded. Now this is a statement. Okay. This is a statement. Let me. Now this statement will return true or false. Did I close that? Let me see. So I didn’t close that. Okay. So I’m supposed to close this. Yep. So this statement will return true or false depending on if this wrapper has a class list called list expanded. So now so this is like a placeholder. OK, this is like this returns a value. All right. I’m just trying to explain it, trying to get you to understand what is happening here. So so area expanded wrapper that class list that contains list expanded.

1:05:36
Is it true? If it is true, the value that is going to be returned here is going to be true. That means area expanded is going to be set to true. But if this statement is false, if this wrapper doesn’t contain this class list, then area expanded will be set to false because this is going to return false. So I think we should try that. Okay, I’ve not committed that yet. So let’s finish. So I’m going to commit that and then now this is not this error is not for us. It’s something else. I’m going to commit that and then I’m going to click. You can see that when I click, it adds that class and removes that class. Let’s go here and see.

1:06:15
We have our will expand diff. When I click, it adds a class of least expanded and the CSS that we wrote took effect. Then when I click again, it removes the class. Now, let’s go back to the button and check. This button is ARIA expanded false. When we click, it changes to ARIA expanded true. You can see that it’s true. ARIA expanded true, ARIA expanded false. So that is working.

1:06:44
Now what I’m going to do is this. I’m going to just make sure I copy this. Okay. Copy that out. I’m going to go in here and then I’m going to duplicate this container. All right. I’m going to duplicate that, duplicate that two times. All right. So let’s go to this so we can see it. So this is going to be Menu 3. All right. So we have different menus, okay? So I’m going to save this and then we go there. Of course, it’s not going to work because I’ve deleted the JavaScript. So let’s clear this console.

1:07:33
I’m going to paste it back. And then I’m going to hit Enter. And then when we do that, you can see that it expands. You see this expands, this expands, this collapses, this collapses, this collapses, this expands, this expands, okay. This expands. Alright. This collapses. Now, so what if we want to close the other while opening this? So what I’m going to do is this. I’m going to paste this and what I’m going to do is just before this doesn’t matter where is before I’m going to just declare I want you to be able to turn it off and on right so I want to declare a variable called close siblings I’m going to set it to true okay or let’s set it to false.

1:08:27
False. All right. Set it to false. And then right inside this for each loop, okay, right inside this for each loop, right inside the click function, okay, before you close the click function, there that part. All right. you close the click function. So I’m going to say if close siblings. That is when you say if close sibling means if close siblings is equal to true. Okay I’m going to open and close that. Everything is going to be in here. Then we’re going to say menu wrapper dot for each. So we’re going to declare another for each loop. Now this for each loop we’re going to declare is going to be for the other ones that are not that is not being clicked because this is a click function. Okay so we are calling the wrappers again and then we’re going to do the same thing open and close and then inside here I’m going to instead of calling it wrap I’m just going to call it W and then we’re going to have our arrow function which will be this close.

1:09:42
So for each of them, so we’re going to say if this W, this wrapper we just declared here is not equal to wrapper. That is, it’s not equal to the one that is clicked because this is the one that is clicked. Remember this is a click, where where is that? Yep. The event listener. So the wrapper.addEventListener.click. So if this one we declared is not equal to the one that is being clicked, because we are declaring this inside the click function, then what we are going to do is, we are going to declare another variable.

1:10:19
So constant, we are going to say sibling button. We are declaring another variable called siblingButton is equal to w.querySelector, IC. So we put a dot there. IC will expand button. And we’re going to say the w.classList. We want to remove the class from those specific ones that are not the one being clicked. Remove list expanded. And then we want to set the area attribute, area expanded to false to this sibling bottom. Okay. Set attribute.

1:11:12
area expanded because they are now going to close. Okay? The other ones are going to close. Expand it to false. Since they are closing, they definitely have to be false. Okay? So we’re done with that. I’m going to just copy this, but I’m going to commit it. I think this. Yeah. And that was the problem. We had a space here. Okay. All right. So, I’m going to click enter.

1:11:47
And then, when I click here, you see, we set it to false. Okay. You know, so, but then if I refresh it, okay, and paste that, refresh it, and then set this to true. Okay. I’m committed. When I click here, if I want to click this one, the other one is going to close. So you can see that they close depending on that. Okay. So we have that. So we’re going to take that, go to our JavaScript section and paste it. But what we’re going to do is we’re going to wrap that in a function, document loaded function, because we want this JavaScript to run after all the DOM elements have been loaded. So we’re going to say window.addEventListener DOMContent loaded. Okay, and then we’re going to put a comma.

1:12:58
Then we’re going to have that arrow function. Put the open and close bracket. Now everything is supposed to go in here, so I’m just going to take this, cut it off and take it all the way to the end. So to wrap everything. So I’m going to update this and then go to the front end. Okay and I’m going to refresh this. Okay so it’s working. That was set to what? False. So I’m going to close sibling. I’m going to set it to true, update it. And if I refresh this again, and we have done it. So that’s basically all there is to learn there. If you want to go ahead and style and give padding and margins, wherever you want to add, you can do that.

1:13:58
So we have this, if you do this like that, you can see we have the menu there and by the time you come here Okay, I can see why Apple made the ads from 800. So you could change your media query. Okay but That’s basically all there is So we have that working So depending on what you want, you know, you want to close siblings, you don’t want to close siblings, that works. Okay, so that’s it guys. I hope you learned something from this tutorial. I hope with this tutorial, you’ll be able to set up this kind of menu in your website if you want to do so.

1:14:35
And I hope you’ve learned a little bit of JavaScript and maybe you’ve learned something new in CSS. I don’t know. You guys are experts. And I hope everything was clear. If you have any questions, you could write it in the comment section. And I will be taking by to see if there’s any issue. If you run into any problem, the tip I’m going to give you is just make sure that your spellings are correct. The punctuations in the JavaScript, that you put all of them. The commas where you’re supposed to put a comma. Close all the brackets. I know some of you may need the code to copy and paste, but Kevin always says, type it along. That’s the best way you can learn. But maybe if you need the code to copy and paste, it could be provided in the circle. Until next time, have a great day. Bye.