Image Image Image Image Image Image Image Image Image


September 6, 2016

Freebie: Ultra Simple CSS3 + jQuery Tabs

September 6, 2016 | By | No Comments">No Comments

Share on FacebookTweet about this on TwitterShare on Google+Pin on Pinterest

When it comes to tabs, the internet is full of them but most do the same thing, they switch from one tab to another and for this reason most of them use a lot of useless code. Here’s the simplest way of getting a functioning tab system, using only jQuery and CSS3. It doesn’t get any lighter than this!

First off, we’ll begin with the HTML.

We’ll be wrapping the tabs inside a content tag, you can do it in whatever tag you wish. The purpose of this being so you can use multiple variations on one page. We’ll be targeting the tab contents with JS

Each list has a data-tab. The tab itself which points to will have the id identical to the data-tab.

Let’s add the JS

The JS targets the lists on click, then gets the data-tab number. After doing so, the current class gets removed off the active tab and gets added to the one you clicked. So what is the current class? The current class animates everything, using CSS3. It would be easier to use slideToggle() or toggleFade()? Yes it would, but then we wouldn’t have access to Hardware accelerated animations, which make a huge difference on mobile devices.

Let’s add the CSS

The most important aspect is the tab-elements. This is set to overflow:hidden so when the height gets switched by the current class it will increase the height without showing the content in. The current class also has a delay set to it, in order for a nifty little animation to occur!

Now, all you have to do is use it and abuse it to your likes! We won’t be adding a download button, since you can copy and paste the code and also get to read it and understand it. We’re coding with the simplest of words for classes just to not overly complicate things!

If you’re looking for a Mobile and Tablet website that has this feature already implemented together with another few thousands, we have a portfolio full of them and also, a live store where you can easily browse through things!

Share on FacebookTweet about this on TwitterShare on Google+Pin on Pinterest