Practical Ecommerce

Video Tutorial: Tabbed Content – Part 2

View Tutorial Tabbed content appears more and more frequently in web pages, and is an interesting way to simultaneously save page space and effectively present information. In part two of this two-part tutorial on creating tabbed content, Practical eCommerce’s online director Brian Getting illustrates how to utilize JavaScript to get our tabbed effect working. View Part 1

Software Used: TextMate

Additional Files: tabs_tutorial_2.zip

View Tutorial

This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 9 )

  1. Legacy User October 11, 2007 Reply

    Best practice: Put links to previous parts on page..in this case part one
    http://www.practicalecommerce.com/articles/568/Video-Tutorial-Tabbed-Content/

    — *Steve McAllister*

  2. Legacy User October 11, 2007 Reply

    There is a link to the first part on the right side of the page (Related Articles), in case anyone else is interested in Part One.

    — *Brian Getting*

  3. Legacy User October 11, 2007 Reply

    Loved the tutorial…possible to get a script of the tutorial so someone can read the tutorial as well?

    — *Dave W.*

  4. Legacy User October 14, 2007 Reply

    Hey, thanks a lot for that tutorial. It really hit the spot!

    — *Isaac S.*

  5. Legacy User October 15, 2007 Reply

    Does anyone have any information on how search engine friendly these tabbed sections are? Will Google follow the tabs and read the content?

    Please email me back at ezrider_2001@msn.com

    Thanks!

    — *Dave Johnson*

  6. Legacy User October 26, 2007 Reply

    Very nice sample. I just have a 2 issues.
    Tabs does not display in horizontal line using IE6 browser, but get stock on top of each other.
    When page get open the first time, all tabs content is displayed ( I have 8 tabs and page get really long), but by clicking on any of them, only one tab is displayed.

    Any suggestions what's could be wrong & how to fix it?

    Thanks.

    — *Armis K.*

  7. Legacy User March 10, 2008 Reply

    Very nice tutorial as usual.

    Regarding search engines, surely only the first tab will get indexed as all the others are "display:none" and the link is client side, not server side.

    Would it not be better to assign a class that the javascript file can change or is that not possible?

    — *Simon*

  8. Legacy User May 1, 2008 Reply

    Again, great tutorials!!!

    — *Jordan P*

  9. Legacy User May 28, 2008 Reply

    Great tutorial! You really saved me lot of time. Thank you!

    — *Julia*