Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we are going to modify our custom function to make sure that the tab we clicked on shows in its selected state. So let's come out of Live view. Let's come back to our sliding_panels.js. Now, still inside of the changePanels function, after the panel_container animation, let's add a few lines. Start with a dollar sign, parentheses, tick marks inside for a string literal .sp, space, .tabs space span, outside of the parentheses .removeClass, another set of parentheses, semicolon, inside of the parentheses for removeClass tick marks for a string literal. Type selected.
So, every time we click one of the tabs, we are going to take that selected class of all of them and then we want to add it back onto the one that was clicked. So on the next line dollar sign, parentheses, tick marks for a string literal .sp, space, .tabs, space, span, colon, nth-child, another set of parentheses, inside of the parentheses for nth-child, two tick marks, two plus signs.
We are going to concatenate in the new index number. So let's come up here to where we declare panelHeight. Let's copy the parentheses with newIndex+1. Let's come down here and let's paste that inside of the plus signs. Now, outside of the parentheses for the item we're searching for, type .addClass, another set of parentheses, then a semicolon, inside of addClass two tick marks for a string literal, type in selected. Then hit Save.
Now there is one other CSS property we're going to want to set. Let's switch back to sliding_panels.css. Let's find the rule that's .sp .tabs span. After position: relative, we want to activate our cursor for these individual items as well, since the browser won't natively set the pointer cursor on a span. So let's add cursor:, space, pointer, then a semicolon.
Now to test this, let's come back to index.html. Let's choose File > Save All, Preview in Browser or do Live view. Now in Live view, I can roll over the panels. I can see my hand cursor. I can click on a tab. The tab goes into its selected state. We actually turn on that border at the bottom in the selected class so that we have a one-pixel white border. Since the tabs container is overlapping the panels container by one pixel, since we set the panel container to -1 on the top margin, we get the illusion here that this tab is connecting to this panel. Same thing for Video, same thing for Photography.
Now that we have our user experience working properly, next we'll set an auto-start so the panel will automatically open up to a specific panel when the page loads.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99883 Viewers
56 Video lessons · 112995 Viewers
71 Video lessons · 81829 Viewers
131 Video lessons · 39266 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.