FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Step & Accordion

Next we want to create some more content for our page, in the form of a step and accordion. In the next lesson you’ll learn how they’ll be able to communicate with one another.

5.2 Step & Accordion

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 the first thing we're gonna do is take a look at adding the step element to the portfolio page under the Items. So the step is fairly simple. You can have a single step on its own. You can see the markup. You have a div, and it has the classes of ui and steps. And then inside there, you have a div with the classes of ui and step. So, that's a single step, on its own, and you have the label inside of there. And of course, you can have more than one step. And that will allow you to group it together, and you'll get this horizontal format. You can also change the type to be vertical. And that way, you can just add that class vertical onto the parent, and also, if you'd like, you can set this to two lines. And of course you have a line break inside of there. Also you have States, so as you can see, we have Active where it's non selectable, but it's clear to the user that they're already on that section, and all they need to do is just add the class of active onto the called active step. Then, also we have disabled just like so on the specific step. Then, we have variations in size. So you have small or large. And of course you don't have to put any class on there if you want the normal size. Then after that, you have the steps that can be growing and shrinking to the parent, and so they get divided up nice and evenly. So that is the step element. So it's time to take a look at adding this into our portfolio page. So the first thing I'm gonna do is create a div. And it's gonna have a few classes on here, so we have ui small, and also steps as well. Then we need the individual steps, so I'm going to have a div element and it's gonna have the classes of ui, and then it's also gonna have the class of step. And then inside of there, you can have whatever label you'd like this to be. So I could say Coffee Blend, something like that, and I'm also going to set this first step to active, because when they enter onto the page, they're gonna be on the first step, automatically. So I'm just gonna set that to active. And then we can take a look at adding in more steps, and grouping these together. And if we go ahead and refresh that in the browser you'll notice that we just have this all start up and again these aren't disabled so we can click on these steps. Very, very important, but you can say for example that I want this to be disabled and therefore you will not be able to click on that last one but you will be able to click on the one in the middle. So let's get rid of that class and hit refresh. So I want to create an accordion below there, and I want the steps to interact with the accordion, and also for the accordion to interact with the steps. So everything stays in sync. So what we're gonna do is just take a look at collapsing that div for the time being. And then we want to review the semantic documentation and underneath Modules, you'll find the Accordion. So the Accordion is actually very simple in the markup. If you take a look at this, we have the main parent div for the classes of ui accordion. Then we have the div that contains the title. So it has the class of title, but because this one is currently active right here, we also have the active class as well. Then inside of the title you have your icon, which is your dropdown icon, so that's one by default and then it will transform it depending on the selection, so whether it's active on non-active. And then of course, we have the actual text itself and then below there we have the content section and again, this can be set to active as this is currently the active class and so we have the active title and the active content. And inside there can put anything you'd like inside of this accordion. And then we have another div, this one isn't active, so we just call it title. And then again you have the icon, the title, and then you have the content as well. So this is real easy, and you have a few options available to you so you can have the basic type. So this means that you just have the basic class on there and it just gets rid of the surround and so forth. And then also you have Variations so the only variation you have is Fluid, so it's fluid to the parent instead of being just a set with, so let's put this into the page. So, firstly we're gonna create a div and it's gonna have a few classes on here. The first is gonna be ui and then it needs the class of accordion as well. And also, I want this to be fluid, so I'm gonna put that class on there. Once I've done that, I then want to create my first section, so the first section needs a title, and this title is gonna be active. You don't have to make it the very first section. It could be the last one, or the one in the middle, or whichever one you wanted. But in this case, I'm gonna keep it in line with my steps. So, as the first step is active, I'm going to make the first section of my accordion active and we also need the class of title. Then inside of there, we have the icon, so we wanna put the class in there and it is the drop down icon. So I'm just gonna say icon dropdown, and the reason why we go with dropdown is because the JavaScript will automatically rotate it and so forth so that it will take care of the animation. So the arrows will look correct. And then of course, below there we need to say something like coffee blend. That's the first section. And then below there we need a content section. Now, again, this content section is active, it's the first title is active, and we also need the class of content on there, and then you can put whatever you like in here. I have some Lorem Ipsum that I'm gonna paste the paragraph, but you could have images, you can have segments, anything you'd like. Then below there we want the normal sections that are closed and not active. So I'm just going to copy this out, paste it below and then we need to get rid of the active classes for the title and content. And I'm just gonna change the title right here to be Mixture. And then I can copy this paste it down below and the last one if Coffee Art. So if I save that and refresh the browser, just like so, you'll notice that we have the styling, that's perfectly fine. But however it's not really looking quite right and obviously it's not functioning because we've not told JavaScript that this is an accordion. So I'll just want to move my accordion down a little bit, by 20 pixels and I also wanna take a look at this paragraph text and get that looking right. So I go back to the CSS and if we scroll up, we can see we have our paragraphs right here, so what I'm gonna do is put in another comma and then I'm going to point to the class accordion, and then look at the paragraphs inside of this. So the paragraph's are styled correctly. There we go. And also I'd like the accordion to have a margin on there, so now this style is specific to a particular page. So down below here let's put in a comment, and we'll say portfolio page, and then we'll target the accordion class, and we'll have a margin-top on here of 20 pixels. Perfect. Go back, hit Refresh, and now you'll notice it's nudged down 20 pixels. So now everything is looking really nice and you can see here that this is fluid. The next thing I want to do is take a look at making this functional via JavaScript. So what we need to do is we need to target the element with the class of accordion, and then we need to run the accordion method. So if I just say, accordion, you will notice that will give me the basic functionality of an accordion. I'm not really passed in any options or settings, but we have a working accordion. So the next thing I want to do is make these two components of the Semantic UI communicate together. So the first thing I'm gonna take a look at is the steps, and when I click on a step I want it to be active and deactivate the previous step. So what I'm going to do is take a look at the JavaScript and I'm gonna target the element with the class of ui and it also must have the class of steps, so let's go ahead and target those two classes, then we want to see if a child element has been clicked, and that child element is the div so if one of those divs is clicked it tells us they've changed to another step. And then we're going to say on. And we want to wait until one of those divs has been clicked. And then we can run a function. And we can end with a semicolon. And the next thing I want to do is take a look at removing all of the active classes. So I can just copy this now [SOUND] and paste it down below so we can target all of the divs and we can say, removeClass and classings have a capital C. And then we wanna remove the active class from anywhere that it exists. So if I save that, hit Refresh, you'll notice now when I click that active class goes, but then when we click on a new one and we want this one, this specific one to be active. So how do we do that? Well again, we use that magical keyword, this. So even though we're not being specific here. We're targeting all the divs. When you actually click on one and you say, this, inside of a callback function, you're actually referring to the one that has been clicked. And then of course I can say add the class, and then we want to add the class of active, and then end with a semi-colon. So if we save that and hit Refresh you'll notice now when I click it will change that one to active. So this is working perfectly but now it's time for the nitty gritty part of it, where we start to communicate with the accordion. But first of all, we need to know the index of the one that's currently been clicked. So for example this has the index of zero and this has the index of zero, this first section, so that's really good because JavaScript is zero-based so we have zero, one, two, and zero, one, two. So all we need to do is get the index of the div that was clicked. So let's create a variable, cuz we're gonna need to store this value in a variable and call it back later, and we'll just call it ind. And it's gonna equal and again we want to get this specific div that was clicked on and we want to get its index just like so, and then just to show it up let's say console.log and we want to log the ind variable. So if I save this and hit Refresh and we open up our console so we can see what's happening here, if I am just to click, just like so, you'll notice that we have an index of one. And if I click on this step, it's gonna say zero, like so. So, you have zero, one, two, zero, one, two. Nice and easy. So, now that we have the index for the current step that's been clicked, we need to say right open up the relevant section on the accordion. So let's delete that line out cuz we know it's working now. I want to target the accordion. And also I wanna run the accordion method, and then we wanna take a look at some of the behaviors. So under Usage we have right here, the ability to take a look at the behaviors. So these behaviors are a little bit different because we have the type of behavior you want and then you have the index, so you have open, close, and toggle. So, what you would do is pass in two arguments. The first one is the behavior, so you put in a string open, right there or close, or toggle. And then you put in a comma, and of course that would mean that you're gonna pass in another argument, and that is gonna be the index straight after it. And the index must be a number. So if we take a look at this, I can set this to open a particular section of the accordion, and then I'm gonna put in the comma. And then I could say 0, 1, or 2, cuz there is only three sections in our accordion and don't forget it's zero-based or I could pass in the variable ind, which holds the index, which is just a number, just holds a number. So I can just save this now, go back, hit Refresh, and now when I click, you'll notice that is opening up the relevant section. So thank you for watching me in this lesson, and please join me in the next lesson, where we'll take a look at updating the stats when we open up a section of our accordion.

Back to the top