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 2

Video: Tabbing within the same page

On occasion, you may wish to tab between blocks of content within the same web page, usually through a tab like interface where you can click on various tabs within the page, see different kinds of information without the page having to reload or make another call to the server to switch between pages. Bootstrap has a great interface for making this kind of effect. So our starting web page looks like this right now. I have a bulleted list at the top with some names, and underneath I have some text, it's just marked up with h3 for a title and a paragraph of text that appears underneath. And we can see that here inside of Dreamweaver.

Tabbing within the same page

On occasion, you may wish to tab between blocks of content within the same web page, usually through a tab like interface where you can click on various tabs within the page, see different kinds of information without the page having to reload or make another call to the server to switch between pages. Bootstrap has a great interface for making this kind of effect. So our starting web page looks like this right now. I have a bulleted list at the top with some names, and underneath I have some text, it's just marked up with h3 for a title and a paragraph of text that appears underneath. And we can see that here inside of Dreamweaver.

So there's my bulleted list, and then underneath here's just a bunch of h3s and paragraphs. And what I'd like to do is turn this into a bunch of tabs that I can click on and see each of these artists' bios displayed individually rather than altogether on a page like a laundry list. So to make that happen, there's a couple of things that we need to do. First of all, we are going to need to do some markup here on the tabs. So we are going to start by taking this ul, and we are going to add a class of nav and nav-tabs.

Then I need to indicate which one of these tabs is going to start off being the active one. So I guess I might make the first the active one, so I'll go ahead and give that a class of active. Obviously, I could have started with any of the other tabs as the active one, if I wished. Then I am going to add a data-toggle to the a href tag for all of these, and the data-toggle as we know is what's going to help pull in the JavaScript to make this page more interactive, data-toggle="tab".

And we need to apply that to all three of these links, so I am just going to highlight that, Ctrl+C or Command+C to copy, Ctrl+V or Command+V to paste, so that it now appears in all three of these links. And finally, what I need to do is connect the specific link for Constance Smith, for example, with the chunk of text that's going to be below. The links that I have up there right now are just sort of dummy links. They don't actually go anywhere. So somehow I need to differentiate between these. So I'm going to give these names, so right here with the first one I am going to call this rewington, leave the Pound sign there in the front, the second one I'll call #smith, and the third one I'd call #ta.

This is exactly what we would do if we were using anchors further down on the page with links on the top. The links the way these were coded would skip on down to a link say, a name ta, for example. It would jump on down the page wherever that happened to be placed. We are going to do something similar here, although JavaScript driven. All right! So that's the markup that we need for the list at the top. Then underneath we're going to need to add some markup here as well. First of all, I'm going to add a section to go around all of this with a class of tab-content.

That section class is important because it's defining that this is the actual content for the web page here, and that's why I am using the section tag. So I'm going to go down and close that at the bottom. Then after the section tag, I'm going to add an article tag here, article with a class of tab-pane. So this article tag is going to get wrapped around what effectively is an article, the h3, and the paragraph.

So I am going to go ahead and end that article down here, and I can indent this h3 and the p because now they are inside of the article tag. So what I did is just highlighted all those lines and just hit the Tab key. So I am going to go ahead and add the same article class of tab pane to the top of each one of these little mini articles, and always of course, make sure you close your tags, and I will Tab over the content here to show that it's inside of the article.

One more time, paste again the article class of tab-pane", and we'll put in our /article down here in the bottom, and we'll tab over this chunk of code. Okay. So we have three articles with a class of tab-pane. We also need to add to the same article tag a couple of other pieces of information, one is an id. The ID in this particular case for this first one will be Rewington. Those of you who think about IDs in terms of CSS almost exclusively, if you're a front-end developer who just works with HTML and CSS, IDs are also used in JavaScript.

And so what we're doing here is we are connecting the link at the top with #rewington to an ID down here underneath, the ID of rewington. We're connecting these two together. So whatever you called your links up here on the top, you're going to need to take that and identify them as IDs beneath inside of these articles. So I'll go ahead and add an ID of smith and further down an ID of ta.

And one final thing that we're going to need to do, since Riley Rewington is the tab that I want to have come up by default when the page loads, I have already specified that up here on line 18 as having an li with a class of active. I'm also going to need to identify which piece of content is going to come up by default underneath, and that of course is the article here about Riley Rewington. So I'm going to indicate that that should come up when the page loads by adding a class of active to this article.

So we have tab-pane and active here for the article class, while the other article classes are just tab-pane. All right! Now that we've got all this markup in place, go ahead and save your page, Ctrl+S or Command+S to save, and Refresh the page in Firefox, and you'll see that we have tabs now going across the top of the page. When I click on Constance Smith, you can see that her information loads here inside of the tab. The little dotted box I have up there because I have selected it at the moment. If I click away from that tab, that box goes away, and here's Xhou Ta, and you'll see that the bio for him is listed here as well. So we can click around in these tabs.

Notice that the URL for the page never changes. We are just displaying different sections of the page here inside of these tabs. So this is a really handy effect. I see it in use on a number of websites these days. It's a little bit more interesting than those long laundry lists or skipping things down the page we used to do back about 10 years ago. This is a lot more fun, a lot more interactive, and certainly more attractive. Some of you might be wondering about Search Engine Optimization now that I've separated these out between the tabs, and the answer to that is Search Engine Optimization should not be impacted at all. Why is that? Well, if you take a look at the raw HTML for this web page, the raw HTML is all spelled out right there in the web page.

So Google would be able to see that when it comes to visit your website. It can read all of the content there. It won't see the JavaScript, it won't see the JavaScript effects, it will see the links at the top of the page, they will see that those link down to further into the page where the IDs are, but the page is very readable to Search Engines, and all of the tabs can be indexed very easily by Search Engine Spiders.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 2
Up and Running with Bootstrap 2

32 video lessons · 19525 viewers

Jen Kramer
Author

 

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.

Join now "Already a member? Log in

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 2.

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.