Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jeremy Hester
Jeremy Hester
1,021 Points

Dynamic product info, where to star? What to search for?

Hello,

There are several websites that have product menu's that will list the details, specifications, reviews etc. of an item. You as the user can click on a header and the info for what you clicked on, like the product details or their specifications, will appear below.

Sites like newegg do this: http://www.newegg.com/Product/Product.aspx?Item=N82E16883101027&cm_sp=Homepage_FDD-_-P1_83-101-027-_-02112015

If you scroll down there's an "Overview", "Specifications", "Q&A" etc you can click on and then the subject matter appears below. I'd like to make something like this but I have NO IDEA what to even search for. They use an unordered list to create the headers and then a description list to fill in the info. Seems simple enough but I need the javascript bit to make it all work.

Does anyone know of a tutorial to get started with this, or what this element is called so I know what to search for? Thank you!

1 Answer

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

Those are just some simple tabs. In short, you make each tab a link that when clicked shows some data in the tab panel below and hides the other tabs. I'm not sure what your end goal is, but Bootstrap some some great components built in. You can find a link to their tabs here: http://getbootstrap.com/javascript/#tabs

Here are some additional resources: http://www.elated.com/articles/javascript-tabs/ http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html

Hope that helps.

Jeremy Hester
Jeremy Hester
1,021 Points

End goal is to use it in the exact same manner as newegg and other commerce sites, as a compact little way of showing more info on products. What you linked seems to be exactly what I'm looking for though, I never thought to look for "tabs"! Can't wait to play with it tomorrow and see if I can make it work, thank you!