TabTop - (purely CSS)

You may edit the above code and use the popup preview to see the effect. However, if you click a new tab style or color in section 2 or 3, the code in the window will be rewritten and your editing will be lost.

Notes on altering the code:

There are no images associated with these flexible CSS tabs. The tabs are laid out to logically display all content down the page if the styles fail to load.

The tab label is written as text, thus the labels should remain rather short so that your tabs will all fit. You may change the font styles and sizes within the stylesheet. Test with your browser opened to various widths to make sure the tab top labels and terms text all fit within the various window sizes.

To Change Sizes:
The index card width supports both a percentage width and a fixed maximum width. Thus, the widths will expand or contract to fit the available space, but the max-width will prevent the content stretching uncomfortably wide on large screens. Also note that placing large photos or tables within the content area may create extra scrollbars if they are wider than the dimension you have set.

For narrow screens, a @media query is added so that the tabs will convert to a vertical display. You can change the threshold value on the media query, or add intermediate media queries to adjust the overall percentage width.

Add or remove tabs:
The code is constructed to make it easy to add or delete tabs in the code as necessary. All tab HTML blocks are identical in the hover gallery, so they can be rearranged, added or deleted. When adding sections to the click gallery, you will need to number each new section in the HTML. The order is not important, just as long as a block number is not duplicated on another block. In both cases, change the number at the start of the TabTop group to indicate the number of tabs to display.

Change colors:
All of the colors are set near the top of the code, and can be changed as needed. They are repeated in the media query and animation sections.

To use multiple sets in one page:
There are generally no restrictions on using multiple tab sets on the same page. Multiple sets will share the same stylesheet, so only one stylesheet need be added. Just add the correct tab count near the top of each set's content.

However, if your multiple sets are to have different styles, then each will require its own stylesheet. Use the checkbox on the form to create multiple tabsets with different stylesheets, which will add an index number to each set. If you are using multiple sets of clickable tabs and want them to share one stylesheet, then manually change the radio button names and IDs in the HTML to break them into unique sets.