Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Tabbing within the same page

From: Up and Running with Bootstrap 3

Video: Tabbing within the same page

looking at the services page, this is a page where we've done a lot of work on in this particular training title, and I've copied this over from the exercise files folder, if you go to 05_02 copy the html file from there, into your bootstrap folder, and this is the page that we have seen many, many times before. Across the bottom of this page, before you've seen a series of boxes of some kind or another, most recently I think they were thumbnails. I've taken that bottom row apart again. And I've recoded it now into a bulleted list at the top here and then four little chunks of text.

Tabbing within the same page

looking at the services page, this is a page where we've done a lot of work on in this particular training title, and I've copied this over from the exercise files folder, if you go to 05_02 copy the html file from there, into your bootstrap folder, and this is the page that we have seen many, many times before. Across the bottom of this page, before you've seen a series of boxes of some kind or another, most recently I think they were thumbnails. I've taken that bottom row apart again. And I've recoded it now into a bulleted list at the top here and then four little chunks of text.

And this is in preparation for turning this into a series of tabs within the page as opposed to having the little thumbnail boxes that were here before. So using tabs within the page then people will be able to toggle between vaccinations, check ups, senior pets and diet plans back and forth without ever leaving this particular page. We're also going to code these tabs in such a way that search engines are still going to be able to read all of the content that's there, on the page, which is very important of course. That we don't want to hide anything behind javascript, so that a search engine wouldn't be able to read the full content of the page.

So, I'm going to start by taking a look at this page in Sublime Text. We are down around line 69. So, here is the start of this particular code. So what I've done is, whereas before we had these titles of vaccinations, checkups, senior pets and diet plans, as headings that were associated with each little piece of content, I just rearranged these into an unordered list. So it's the same old code you've seen before. It's just now marked up as a list. And then the little blocks of text that were inside of the thumbnail in the site are now listed here underneath starting around line 79.

And it's just a little paragraph of text along with a button to read more. So, what I need to do now is two things. One is I need to make sure that, this actually winds up looking like tabs, and the way that's going to happen is that the unordered list that's up here around line 70 will wind up behaving as the tab portion of this content. We then need to associate those tabs with the content that's going to appear within that tab. Which is the content that you see starting around line 79. So, we're going to have to somehow associate the fact that when you click on the word vaccinations, up around line 71, that the text that you see in the box will be the paragraph that you see starting around line 79.

These are the pieces that we're going to work on. So, I'm going to start with the bulleted list, and what we're going to do here is we're going to give this bulleted list a class of nav, and nav hyphen tabs. That is something that you've seen before. The fact is, we've styled the navigational bars in the previous video. You saw that we use nav and nav tabs or nav and nav pills. In order to style a, unordered list as tabs or pills. So that was pretty straight forward to make that turn into tabs.

As you've seen with some of the other JavaScript that we've worked with, one of the important things that we need to have is the ability to bind the JavaScript to our HTML and we've been doing that through these data attributes. Of data hyphen something and we're going to do that exactly the same way here again. Inside of each of these a tags we're going to add a data, hyphen, toggle, equals, tab. And we need to put this inside of each of these anchor tags associated with this bulleted list. So I'm just copying and pasting that data toggle equals tab to each one of these a tags.

So that's the second thing that we need to do. The third thing that we're going to do, is we're going to identify which of these links is going to open which chunk of content down below. And we're going to do this by ID. So what we need to do is we're going to set up the content that starts around line 79 With some divs that are going to have an ID associated with them. And then the tabs are going to point to those IDs. I'm going to set up the tab portion first here. Up here in line 71, where you just have the pound sign right now, inside of the href tag.

We're going to make that go to Vacc that's going to be my id of vacc short for vaccination that I need to set up further down the page. I'm going to set up that id in just a moment. So I'm going to set each of these up. So I'm going to call this check ups, and I'm going to to call this one senior And I'm going to call this one diet. As always it doesn't really matter what you call these ID's, you can call them anything you like. I prefer to make them relevant to the content so they're somewhat self documenting. Now that I'm calling ID's that don't exist might be a good idea to make those ID's exist.

So down here, after line 78 here where I had a note that this is where the vaccinations are starting, I'm going to add a div with a class of tab, hyphen, content. And this div is simply here to point out that all of these bits of paragraphs here are all part of what's going to happen with tabs. That's the whole purpose of this. And also not to display that content on the page. Unless it's specifically being called by a tab that you've clicked on.

So, that one div surrounds everything. Then, around each of these little chunks of code that are going to wind up being the content of the tabs, we're going to add an additional div. And that div will have a class of tab-pane. And fade. That's going to go on all of them. But because I want to start with this particular div, the one about the vaccinations, I'm also going to add an active class. In other words, this is the one that we're starting with. And an In class, as in This is the one we want to appear first.

So all of that goes in the very first div and then after the read more here on line 82 we can go ahead and close that div. So then here for check ups we're going to do the same kind of thing again. I'm going to put in my div just after that checkups comment, and I'm going to add a div with the class of tab-pane, and fade. That's all we need, just tab-pane and fade. And we're also going to give this the ID, of checkups.

And I forgot to add that ID up in the very first one. So, I'll go back and add that in just a second. Slash div. Back up here at line 80, I forgot to add that ID. So, this will be the ID of vacc. Okay. Then, down here for senior pets, we're going to add another div, with a class of, just like before tab, hyphen, pane and fade, and this one will have an ID of senior, and slash div will come after line 94 here. And then for diet plans on line 98, We'll have a div with a class of tab hyphen pain fade and an ID of diet.

And a slash div after that read more so that slash div's going to come on line 101. So lemme just go through one more time exactly how this code works now that we've got all the classes and IDs in place. Here at line 71, for example, we have an LI here that is corresponding to a href with an id of vacc that id, of course, is down here at line number 80. So, what will happen is when you click on this link for vaccinations in line 71.

What will appear is the little bit of code in the div with an ID of vacc, which appears starting at line number 80. So that's how these two chunks of code are going to work together. The very last thing that we need to add on this HTML page, is a bit of JavaScript to initiate these tabs and I'll show you why. If you just go ahead and save what we've got so far, so far we've just added some HTML markup and we've just added some classes that pull in some CSS and with that data hyphen toggle We've bound a little Javascript to this.

So if you take a look at what we've got so far by opening this in your browser. You'll see that we have this lovely line down here on the bottom. No active tab, though. Things are working. Isn't that nice? And once you click on something, you'll actually have an active tab in place. But, unfortunately, when you initially load the page, that tab is not in place. So what we need to do is, we need to initialize our tabs. And the way we can do that is with a little bit of Javascript. So, scroll all the way down to the bottom of the page, where we have our JavaScript down here at the bottom.

You've probably forgotten it. We added it way at the beginning of the course. And we've kind of ignored what's been down here at the bottom of the page ever since. So now, what we're going to do is add, a little bit of JavaScript. Don't get too scared, it's not that terrible. We're going to add a script tag. And we're going to add a slash script tag. So far, not so bad, right? Inside of that, we're going to start this with what you see in pretty much every bit of J Query you're ever going to write. And that is this dollar sign, function with 2 parenthesis just like this followed by 2 curly brackets just like this followed by a semi colon.

So we have 2 parenthesis that are together here. We have two curly brackets that are together here, this parenthesis goes with this parenthesis over here, and their word functions in there, and it starts with a dollar sign. That's the line of code. This is the magic line of code that starts everything, or a lot of things that you're going to wind up doing in JQuery. And I find that it's easiest to write it all on one line like this to make sure that you've put in all of your parentheses an all of your curly brackets all at once. An then, click in between the two curly brackets, an hit Return. An then, that way you'll make sure that all of your parentheses, an curly brackets, an everything has been closed, because it is so easy to miss that.

When you're working with jQuery. So then the next thing we're going to do here is we're going to add the following little bit a JavaScript. We're going to add that dollar sign again, which is an indication that this is jQuery. And inside of the bull parentheses here we're going to add, a CSS selector. What we want to do is we want to tell CSS, where in the document we would like to have this tab show up first. And so we need to select that place, using some kind of selector. And so if we take a look at the tab that we got here, what could we use to grab on to this LI right here, and make sure that this is the very first one that is going to show up.

Well, there's a number of ways that you can do this. The way I've chosen to do it is to say within the class of nav tabs, which is in the UL here, take the very first a in the list, whatever that first a is. You can certainly add an id here or something and, and write your selector based on that, but I'm just working with the HTML and the CSS that I have here. So my CSS selector then down here at the bottom will be as follows. Inside of single quotes dot nav hyphen tabs, and then space a colon first. Alright? So that's just going to select that very first link within the list that happens to be about the tabs.

Then I'm going to put a dot tab and inside a parentheses, I'm going to say show. Parentheses and the single quotes, just like this. And I'm going to put a semi colon there at the end of that line. That's all there is to it. This little bit of JavaScript here will initialize the first tab on that page. So if you go ahead and save this and we now go back to our webpage and, if I hit refresh, we'll actually see nothing change because I had already selected this tab before, and now the web page is loading with that tab in place.

So, just to prove to you that it's working I'll click on diet plans here, and then I'm going to refresh the page and now you can see that vaccinations was selected. When this page is refreshed and when it eventually opens. Now that we've got the tabs working, and that they're in place, and things are looking reasonable, one of the things you might want to do next is just add a little bit of styling here. For example, how cool would it be, if we had a little border that wrapped all the way around the tab area down here and make it look more like a box sort of the self-contained kind of thing.

And what if the glyphicons that are here next to the words, vaccinations checkups senior pets and diet plans, what if they were one color, when the tab was not selected? But a different color when the tab was selected? So, those might be the couple of little styles you might want to add, just to clean this up and give it a little bit of polish. So, let's go ahead and write some CSS for that. If you're not sure exactly what I've just done, you can take a look at the CSS inside of the text file that I've given you in your exercise files folder. So, I'm going to open up custom.css, and I'm going to scroll all the way down to the bottom of the file and I'm going to add some more CSS.

First of all, I'm going to add a class of tab, hyphen, pane. This is the area where that tabbed, the content is going to appear. And I'm just going to give this a border on the left side of, let's say, one pixel solid, #ddd. I'm also going to give it a border on the right. Same thing, one pixel solid #ddd. And I'm going to give it a border on the bottom. One pixel solid #ddd. Great, then I'm also going to give this a little bit of padding. Because I don't want the content running right straight up against that border, so I'm going to add some padding.

On all four sides of 0.8 ms. So just that one little style if we go ahead and save and refresh our page here. There we go we have this nice little box now that goes around our content. It looks, I think, a little bit more tab like. You can actually see that the tab is associated with the text underneath. And it's not all smooshed up against the edges of those borders. Okay, so then in terms of styling these glyphicons, we need to add a few little styles, and actually take out a few styles as well. The style I'm going to remove is up here in your custom styles sheet, lines 18 through 21.

It's calling for the glyphicon-pushpin and the glyphicon-heart. And just going to pull that out, so now what we have is a glyphicon that's going to be this tan color and that's pretty much all we're going to have. So I'm going to save this one more time and just to show you that that's working if I refresh my page. Now they're all tan glyphicons. Which is just great. So now all I have to do is say, for the tab that is the active one, the glyph icon there, I'd like that to be a different color. And active will be a class that will be assigned to each one of these tabs by JQuery, depending on where you are in the tab structure.

Or, technically, it's by JavaScript. All right, so I'm going to scroll on down here, back to the bottom of my page again. And I'm going to add a style for this. So what I'm going to do is I'm going to say dot active, space, dot glyphicon. So in other words these are the glyphicons that are inside of some HTML element with the class of active, and for those I'm going to say the color, is CDAE51. And then for my generic Glyphicons, that's way back up here. I'm going to change their color, rather than this color I'm going to make it 3F2B22.

So, let's back up on line fifteen, I have changed the color there, to 3F2B22, which is I think the brown color. So, if you go ahead and save that style sheet, and you refresh your page again, now you will see that the active tab has the tan color glyphicon. And the other ones are dark, and when I switch tabs, now my glyphicon colors are changing right along with things here. So that's kind of a nice effect to have here for your tabs. So tabs can be a great way of presenting little bits of information here in a very small space.

It adds a little bit of interactivity to your page. And, once you throw in a few little styles here, you have a very nice looking interface.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 3
Up and Running with Bootstrap 3

37 video lessons · 23183 viewers

Jen Kramer
Author

 
Expand all | Collapse all
  1. 5m 25s
    1. Welcome
      58s
    2. Using the exercise files
      1m 19s
    3. Installing Sublime Text 2
      3m 8s
  2. 29m 0s
    1. What is Bootstrap?
      8m 1s
    2. Downloading and unzipping Bootstrap 3
      4m 31s
    3. Examining Bootstrap file structure
      4m 34s
    4. Adding CSS to a Bootstrap HTML file
      4m 35s
    5. Adding JavaScript to a Bootstrap HTML file
      7m 19s
  3. 44m 38s
    1. Exploring Bootstrap's grid system
      9m 10s
    2. Creating new rows and cells
      14m 5s
    3. Adjusting column widths using offset
      5m 2s
    4. Changing column order using push and pull
      5m 34s
    5. Nesting columns
      3m 43s
    6. Creating a JumboTron-style layout
      3m 41s
    7. Challenge: Working with grids
      1m 31s
    8. Solution: Working with grids
      1m 52s
  4. 53m 34s
    1. Exploring basic typography: The small and blockquote tags
      4m 29s
    2. Exploring Bootstrap's responsive classes including .hidden and .visible
      4m 44s
    3. Styling buttons using btn classes
      4m 43s
    4. Styling images with responsiveness and decorative touches
      5m 22s
    5. Incorporating Bootstrap 3 glyph icons
      3m 28s
    6. Creating a thumbnail gallery
      6m 2s
    7. Styling tabular data
      5m 3s
    8. Overriding core CSS with custom styles
      12m 53s
    9. Challenge: Styling panels and callouts
      2m 17s
    10. Solution: Styling panels and callouts
      4m 33s
  5. 27m 41s
    1. Implementing location breadcrumbs
      6m 38s
    2. Using tabs and pills for navigation
      6m 58s
    3. Developing a responsive navigation bar
      9m 9s
    4. Challenge: Modify the "pancake" button
      1m 3s
    5. Solution: Modify the "pancake" button
      3m 53s
  6. 37m 45s
    1. Implementing dropdowns within a navigation bar
      5m 5s
    2. Tabbing within the same page
      15m 45s
    3. Accordion panels with collapse functionality
      11m 37s
    4. Challenge: Tooltips
      1m 59s
    5. Solution: Tooltips
      3m 19s
  7. 3m 0s
    1. Next steps towards advanced Bootstrap
      3m 0s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 3.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.