Live Demo

Basic Tabs

In this example, tabs are implemented in their simplest form: Along the top of the content block is a row(s) of buttons, which when clicked open the corresponding tab and displays the relevant content.

The style of the buttons and the content blocks can be styled to suit your website.

Advanced One

This is an example we've taken the basic setup and applied a more complex layout: The buttons are no longer at the top on larger screen devices (tablets and laptops) but now on the left-hand side, and instead of being simple buttons they are now "boxes" with the tab name and an embedded button to open the corresponding content block.

As the page width gets smaller (smartphones etc.), the layout reverts to that of the "Basic Tabs" setup.








Advanced Two

This is an example we've taken the same layout as "Advance One" but made the "boxes" on the left a bit more visual, with an image background and a different layout. This enhances the look of the whole tabbed system, making it very aesthetically pleasing. We've also changed the type of content, to highlight the versatility of tabs.

As the page width gets smaller (smartphones etc.), the layout reverts to that of the "Basic Tabs" set-up.

Class One

Class Two

Class Three


About Tabs

Tabs are another great way to get a lot of information and content onto a single page, splitting it up into bite-size chunks at the same time.

The design and layout of tabs can range from very simple to very elaborate.

Have a look at some of the examples above to get an idea of what is possible.

© v3.11
Recent Reviews
Tracy Aspell

The Creative Institute

Google Reviews

Very quick response and set up time for my website. Any edits are also done very quickly. The company has a wealth of experience and is very adept and creating an easy-to-use webpage designed from the customer's perspective. Highly Recommend.

Duncan Stokes

Hassop Station
Peak District

Google Reviews

Great understanding of the web needs of a multi-faceted business. Very quick to respond and find solutions. Personable, no techie waffle. Understands not everyone needs to understand how it all works they just want it to work!

Cookstown Cycles

Cookstown Cycles

Google Reviews

Caffeine Injection provide a professional and fast service. Any queries or work required was dealt with efficiently. Would highly recommend the use of their services.

Jennifer Stirling

Jenny's Cakes

Google Reviews

Steve designed a website for me which is very crisp and easy to manoeuvre. He also maintains my webpage on a monthly basis which means I do not need to worry about updates etc. Very responsive to changes or little bits I want to add. Would highly recommend him.

Colette Delargy

Maths Buddy

Google Reviews

Caffeine Injection has just updated my whole mathsbuddy website to take account of the Co-vid 19 pandemic which now includes a booking system. The firm has great ideas and is very responsive to requests so I'm totally pleased with the service.