Join Chris Converse for an in-depth discussion in this video Animating the panels based on the tab clicked, part of Creating a Sliding Tabbed Panel with jQuery.
So now that we have a click event assigned to each span that targets this changePanels function, let's come down here and copy that name, plus the parentheses, and let's come down to our document, after the document ready, and define our custom function. So we'll type function, space, paste in the function name, beginning and ending bracket. Let's split that open on the brackets. Now we need to do a calculation here, which is we need to know, based on the tab that was selected, where to animate the new panels to.
And what we need to do is make that calculation based on the actual span that was clicked. So we need one extra variable. So inside of the parentheses, for changePanels, let's type newIndex, so when we call this changePanels function, we can some along a variable that will be captured in this name. Now when we call the function, we're actually sending anything yet. So let's come back into the click event for the spans, let's hit a few spaces, and let's actually send the indexNumber of the item that was clicked.
So we can do that by typing dollar sign, parentheses, this, outside of the parenthesis.index and then another set of parentheses. So when we call changePanels we're also going to send the index position of the item that was clicked, and jQuery will take care of that for us. So then when we call this, we'll know which individual span was clicked, and then down here we can start creating our variables for our calculations. So first we're going to start with var space newPanelPosition.
We are going to set that equal to a set of parenthesis. Then we're going to calculate the window.panelWidth, so let's come up here and copy that variable name. Let's paste that inside of the parentheses. Now we're going to multiply that by adding an asterisk, times newIndex. Then we're going to take that value, so outside of the parentheses, we're going to multiply that times -1. That's going to give us a negative number for the width of the panels so that we know where to slide the panels_ container toward the left on the x axis.
Next variable, newPanelHeight=$() tick marks inside for a string literal .sp .panel: nth-child, another set of parentheses. so what nth-child does in jQuery is it picks out a specific child based on an index number, so what we're doing here is we're basically figuring out which one of the panels we want to animate to, based on which one of the children was clicked on.
And so inside of the parentheses here we're going to typically put a number, but what we're going to do is do a calculation based on our newIndex variable. So inside of the parentheses two tick marks for a string literal; inside there, two plus signs; inside there, we are going to put a beginning and ending parentheses; and inside these parentheses we can do our calculation. So we're going to type newIndex+1. Since the index can start at 0, we don't want to actually multiply this item by 0.
We need to have a number starting with 1. Now, outside of the parentheses for the item we will search for, we are going to type .find, another set of parentheses; inside of the parentheses, for find, two tick marks for a string literal. [00:03:4134] We want to search for panel_content, outside of the parentheses .height, another set of parentheses, then a space. Then we are going to add 15, then a semicolon, which is going to give us 15 pixels of space on the bottom of the panel.
Now that we have got these two calculations in place, now we can actually create our animations, so dollar sign, parentheses, tick marks for a string literal. We are going to target .sp .panels, plural, outside of the parentheses .animate, another set of parentheses, semicolon, inside of the parenthesis for animate beginning and ending bracket. The property we are going to animate is going to be left:, and we are going to animate that to the newPanelPosition.
So let's come up here and copy that variable name. Let's paste them inside of here, outside of the brackets, 1000 milliseconds. Let's hit a return. Now let's animate the height of the panel_container, dollar sign, parentheses, tick marks for a string literal, .sp .panel_container, .animate, another set of parentheses, semicolon, brackets inside.
Inside the brackets we are going to target the height property, colon, and we're going to animate that to the newPanelHeight. Let's come up here and copy that. Let's paste that inside of here, then comma, 1000 milliseconds for that as well. So now make sure all of your files are saved. Let's come back up to the browser and let's reload this in the browser. Now in the browsers we still don't see the panels, because we haven't actually animated anything open yet, because we haven't run any of our custom functions. But if I come up here and click on one of the tabs, we will see that the panel_container opens up, and that extra 15 pixels down here give us that same padding set that we set in the CSS. And if I click on video, we will animate this over. Notice the height of the overall panel, and it makes that new height as well,. Click on Photography, Video, and then back to iPad.
Now we have the panels tab animating correctly to the right panel and corresponding to the tab that we clicked on. Next, we will work on adding the selected state to the tabs so that we can indicate to the user which tab they've clicked on.
- Creating the main panel and tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements