Tab Navigation
This component can be used as navigation, or it may be used for collections of some kind. If the component were not limited in width on this page, it would have spread out covering 'wall-to-wall'. That can of course be done, and the height may be set to100%, so you can use it for whole pages.
You may prefer changing the colours, and that involves both the ID on each .tabsconent class in the style sheet and the attributes on each button at the top of the html code.
The buttons have been given a width of 20%. If you change the number of buttons, you also need to change the width, or you can leave the width to be determined just by the length of the text plus padding. It will then look like the buttons on the index page of this 'component shop'.
The contents of the panels can be anything you need to put in there.
At the bottom of the component there is a HTML element with some java script that makes the whole thing work. The ID and class names used in the component are also being utilized by that java script and should therefore not be changed.
If you want to add contents below this component, it is best to insert a new container section below and outside the container .tabs-wrap.
Download the component:
About
Who we are and what we do.
News
Some news this fine day!
Services
What can we do for you?
Contact
Get in touch, or swing by for a cup of coffee.