Close
Tel: 0800 084 3086
0800 084 3086

Killer CSS & jQuery tabs for you to use

23rd August 2017 By Matt Ainsworth
Killer CSS & jQuery tabs for you to use
Killer CSS & jQuery tabs for you to use

Killer CSS & jQuery tabs for you to use

23rd August 2017 By Matt Ainsworth
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.

More from our journal

This is where we talk about our love for digital, our clients and our industry. View all »

Contact us

Speak to our team