Work with us

To contact our team enter your details below and we will be in touch as soon as possible.

Download

To download "" please enter your email address below

Menu

23

Aug

Killer CSS & jQuery tabs for you to use

Killer CSS & jQuery tabs for you to use
We’re currently working on a large-scale eCommerce project that has quite a bit of content on each product page, some more important than other bits. Showing and hiding this content in aesthetic way that was user friendly was a challenge, and one that we were keen to solve.

Having done some research, there was nothing out there that exactly accomplished what we were looking to achieve. Most tabbed areas look a bit dull – it’s difficult to use CSS to differentiate the active tab from the other ones in a great way from a design & front-end development perspective.

In our solution we’ve a combination of HTML attributes, jQuery and CSS before/after pseudo-elements that allow us to hide borders and change border colours effectively and simply. Take a look via our CodePen tutorial below.

See the Pen Cool CSS & jQuery Tabs by Matthew Ainsworth (@matt_kolodo) on CodePen.