Looking through your code, there's some invalid markup (you have UL
s - list containers - with no LI
s - list items). I've created an updated Fiddle that corrects the code (to some degree) and shows an extra content item:
You should be able to add more, but there are five widths you'll need to change (line numbers refer to the CSS panel on the Fiddle):
- 'all the child elements are refering to this width' (line 17): this is the width of the container.
- 'width = half size of #moving_tab' (line 47): this is the width of each tab - should be the width of the container divided by number of tabs (in this case: 300/3 = 100)
- 'width = half size of #moving_tab' (line 64): this should be the same as the above (it's the moving blue box behind the tabs
- 'width is width of #moving_tab times 2' (line 87): this is the width of the list that holds the content items. It should be the width of the container times the number of tabs (in this case, 300x3 = 900)
- 'width is the same with #moving_tab' (line 96): this is the width for each content element. Should be the width of the container, minus the left and right pading (in this case: 300 - 10 -10 = 280)
Hope this helps...