FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 Step & Accordion Communication

Hi guys, welcome back to getting started with semantic UI and in this lesson we want to continue on adding content to the portfolio page. So in the previous lesson I was going to move on and show you how to get the accordion to update the steps and then we have a two way relationship, the step updates the accordion. And the accordion updates the steps. So, everything stays in sync. So, how are we gonna do this? Well, lets take a look at a few of the settings for the accordion and if we scroll down you have a few general settings such as exclusive, collapsible, duration easing. But then also you have. Callbacks. So with the callbacks, we have onOpen, onClose, and onChange. So if a section is open, it's gonna callback, on close it's gonna callback, and on change it's going to call back. So that means whether something opens or closes, it's going to. Callback. And give us the context, which is the returned item of the active content. So it's not the active title, but it's the active content. So now I want to apply the onOpen callback to our accordion. And in that function, I would like to then, update the stat. So you can see that, what we're doing is targeting, the element with the class of accordion, and then we are running the accordion method. So in my case, I now want to start to put in a few of those settings. So the way we pass in those settings to the accordion method is you put them inside of an object literal and if we take a look at some of the accordion settings we have duration. I'd just like to bring the duration down, you can play around with all. Of these other settings if you like that I want to change the duration to be 200 milliseconds not 500, so we're bringing that time right down. So let's go ahead and set the duration and we want to set that to 200 milliseconds, so. >> That's one option that I can put in here and I can bring this on to a new line just like so and then I want to have a callback and the callback is on open so whenever a section opens. We want to call back a function that's gonna execute a block of code. Now to prove this is working, we're going to use the console. And I'm gonna say console.log, and we're going to log in the console. Opened section. So this string will go to the console when we open up a section in our accordion, save it, hit Refresh, inspect the element, and then go to the console. And then let's go ahead and scooch this guy over here cuz we're gonna be doing quite a bit of console work. And all I need to do is click and you'll notice it says, open section. So whenever I open a section, it's going to. Give us that string, you can see there that it's been repeated four times. All right, so now we have this working. The hard part is trying to relate to the step. So, let's go ahead and put this down onto a new line and I want to see what this is referring to. So, this is referring to. The context that is referenced in the documentation. And that is the active content. So, for example, let's say I've opened up the first section, which is by default here. So we have an active title and we have active content. And. What it's gonna return in context wise is actually this div element, the active content, not the active title. And that will tell us, you know, the information that's inside of it. We can also take a look at the attributes that are being applied to this div element, which is very useful indeed. Because we can't actually use the index method. And the reason being is because the index doesn't match up to the steps, cuz you'll notice that we have three div elements. That's great. We have step 0, step 1, and also step 2. So after we have done that we can target a div specifically and tell it to be active. That works fine. But however, when you reverse this and you have the accordion, you actually have. The index of 0 here, which is the first active title, then the active content is the index of 1. This actually causes the problem because ideally that's section 0, not section 0 and 1. So the whole idea is that we can't use index in that fashion. So what I can do is, for all of the content divs, I can add an attribute on here. So I can say data-index, so this is just metadata for this particular DOM element. And I can put in a number relating to the index. So we have 0, 1, and 2. Once I have that you can save this and then let's do another console.log. And we want to log this, which means, the current active content div. And we want to take a look at its attributes. And we want to grab the attribute of the data-index. So let's copy that out, and paste that in, just like so. And there we go. So that will return the value of that attribute on the current active div giving us the index that we're looking for 0, 1, and 2 and then of course we can reference these divs here, 0, 1, and 2. So let's first of all make sure this is working correctly, let's hit Refresh. We have 0, like so. We have 1, and we have 2. Nice and easy. All right, so, once I have this,. The next thing I want to do is take a look at storing this in a variable. So I'm going to store this in a variable. We'll say step index and that's equal to the value of that attribute of the current active content div. And then, we want to take a look, at all the divs inside of the step. So, forget the accordion now. We're done with that. For the time being. And, we want to take a look at these developments. And, what we want to do is remove. The active class from all of those divs, just in case it's just a real nice easy one liner. So again I can just copy this line out. So we're look at all those divs and if they have the class of active, it will remove the class for us, if it doesn't then it doesn't matter, it won't remove it. So, after that, what we need to do is target those divs again. So again, I can just copy this out right here. Paste it in. So we're targeting all those divs, which as you know, we don't want to do. Because we're gonna be adding the class of acted, but we only want to add it onto a. Particular DIV within the steps. So the way to do it is to put in the color on and say EQ. And then in the brackets you can define which specific child div you want to target. So I could say. 0, 1 or 2. Just like so. But obviously this is dynamic. So the number is stored within this variable. So what I need to do is concatenate that variable into this string. So I'm gonna put in the single quotes again. Now if you've used double quotes here you need to use. Double quotes, again, in here, but I've used single quotes. And then you need to say plus plus, so we're concatenating both sides of the string. This is one string now, and this is the other string, and in between there we're gonna push our. Value, which is from step index. It's stored inside of that variable. So now we're targeting a div specifically, and then we can add the class of active and then end with a semicolon. So if I save this now, we hit Refresh, you open up a particular section and there we go. Perfect. Now also what I was able to do was close the section out completely. Now I don't. Like it when all the sections are close, because we still have it highlighted here. So I wanna make sure that we must have one section open at all times. So again, refer to the settings and you'll see collapsible is set to true. If it's set to false, at least one section has to be open at all times. So I can just copy that, and again we can just take a look at this object literal, and we can add this is in just like so. Paste that in, collapsible, and it's a Boolean. So I'm gonna set it to false. And then don't forget you need to put in the comma right there because you have another property. So save it, go back, hit Refresh, and now you're unable to close it. One section must be. Opened at all times. So these work both ways. That is absolutely perfect, that's what I wanted. Now last but not least. What I want to do is stop execution of code that doesn't need to be executed. And this can happen with applications that aren't even processor intensive. But what I like to do is code it properly and then of course this may help you in projects that obviously utilize a lot more memory and so on and so forth. And that is the fact that even if we click on an active step, it's still executing this command down here which is not ideal. So, what I'm going to do is say that if a step has the class of step and has the class of active, we don't want to execute the code. So for example, down here you can see that we're targeting all the divs. And they are the separate steps. And if I was to just very quickly say console.log. And we just say something like hello. And end with semicolon. Save it. Go back and hit Refresh. You'll notice that yeah everything is working just fine. We're getting the hello. But now watch, I click on active and it's still executing that block of code, and it's needlessly executing that block of code. So in order to solve this problem we're not actually gonna use any JavaScript cuz there's no need. There's actually a little CSS trick that you can do, and that is we can check for two classes, which is active and step, on a single element. And if that element has both of those classes, we. Can actually prevent the default clicking behavior with CSS. It's very simple. All you need to do is under the comment portfolio page. And let's add it above, because the steps are above the accordion. We're gonna check for a div element that has the class of active, and also has the class of step. Again, it doesn't really matter what order you put these classes in as long as you don't have spaces in there with your CSS selector. So, make sure it's one long string and then inside of there we can say pointer events, and I can set it to none. So, when I do this I can save it and I can hit Refresh and now when I click. You'll notice that it's not coming up with anything. And that's also, I took out the console.log, let's put that back in to show I'm not cheating. You can see there nothing's coming up. Click on a new one, we get the hello, click on that, get nothing. And so on and so forth. So you can see how this works. And that's a nice little CSS trick you can do. Without complicating your JavaScript even more. So, thank you for watching me in this lesson and please join me in the next lesson where we'll take a look at the contact page.

Back to the top