Tabs Jquery Codepen

Posted on  by admin
  • In this tutorial, we’re going to look at how to create tabs in HTML, CSS and jQuery.
  • If you get stuck, don’t hesitate to ask me a question.
  • Tabs are a great way of grouping lots of content into a very small space.
  • Think of tabs like the TARDIS…bigger on the inside.
  • They can be incredibly handy when you have a lot of content that would simply fill up your page with too much information in one go.
  • You might also like: Creating an Accordion with HTML, CSS & jQuery.
  • Skip to the HTML.

Skip to the CSS. Skip to the jQuery. I go into detail on the specifics of the HTML layout below. Starting off there’s a div with class="tabs". Inside there’s an unordered list, (or an ordered one if you like, it makes no real difference), with class="tab-links".

  • Inside the list items there are anchor links. The first list item is marked as class="active".

  • This indicates where to start the tabs. Note: When the CSS is all done, the tab link parent with class="active" will be the highlighted one on page load.

  • There’s a div with class="tab-content". Inside of that, we have 4 divs, each with class="tab", (this number corresponds to how many tab links there are).

The currently visible tab will also need an active class, e.g. class="tab active". I’m going to keep it simple with basic CSS (as opposed to an SCSS pre-processor like Sass, Less or Stylus). The bulk of this tutorial is aimed at beginners, so I’m taking that into account.

4. Animated HTML & CSS Tabs

I go into detail on the specifics of the CSS styling below.

  • The display:inline-block; adds a type of clearfix while also making it more ‘stable’ than if we used display:block;.

  • The reason we use a clearfix above yet not here is as follows: display:inline-block; sometimes adds 7px-ish of margin below the affected element with no way of removing it.

Takeaway

Sometimes using a minus bottom margin works, but it depends heavily on how your HTML is structured. In this instance it’s fine. We declare no list-style to stop it appearing as a default list.

18. CSS Tab Portfolio Example

Then the margin so the links are spaced evenly apart, (using margin:0px 5px; is the same as using margin:0px 5px 0px 5px;). These are all basic styles which you should understand if you’re attempting this tutorial.

If you don’t, please find the proper values and the definitions for each on the CSS-Tricks Almanac.

Sr.No.Option & Description
1active

This option specifies the current active tab/panel. By default its value is 0.

2collapsible

This option set to true, it allows tabs to be deselected. When set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.

3disabled

This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). For example, use [0, 1] to disable the first two tabs. By default its value is false.

4event

This option is a name of the event that lets users select a new tab. If, for example, this option is set to "mouseover", passing the mouse over a tab will select it. By default its value is "click".

5heightStyle

This option controls the height of the tabs widget and each panel. By default its value is "content".

6hide

This option specifies how to animate hiding of panel. By default its value is null.

7show

This option specifies how to animate showing of panel. By default its value is null.

You may be wondering why I’ve used transition:all linear 0.15s; instead of transition:background linear 0.15s;.

3. Closable CSS Tabs

The reason is simple, in my experience, you have to think ahead. If you don’t then nasty, (sometimes hard to fix), bugs pop-up seemingly out of nowhere.

By using background instead of all, we’d be limiting what can be transitioned on the :hover effect. Since this is a tutorial, many of you may want to change the text colour on hover.

By using allinstead of background that makes it possible.

Conclusion

This is the background of the tab content section. We set all tabs to display:none; which hides them. Then we set the active tab to display:block; so only that one will show up.

It’s a simple case of using CSS the way it was designed, which was to cascade down. Hence the name, Cascading Stylesheets. You might also like: Creating a Dropdown Menu with HTML & CSS.

Below you can see the completed jQuery code. Keep scrolling for a good explanation of how it all works and what it all means.

12. Minimal CSS Tab Design

Let me clarify something before we start: Everyone has their own way of coding, with jQuery this is mine.

Writing it out like this makes it easier for a beginner to grasp, it’s also efficient. You have to start by checking if the document is ready, for this we use:.

Next is to check if the user has clicked on a tab, to do that we simply reference every link that happens to be a tab link with .tab-links a.

7. Scaling Animated Tabs (CSS)

Next, we create a variable called currentAttrValue, (current attribute value), which grabs the href="" of the clicked anchor link. We need a way of matching up the .tab-link anchors with .tab sections. We start off by referring to the entire tabs component, with .tabs, then we say “If .tabs has a child with an #id that then matches a .tab-linkhref="", then they should be linked up”.

10. Flexbox Based CSS Tabs

Then we say “Show the element with the referenced #id, such as #tab2, then find the other tabs, which are siblings of #tab2, and hide them”.

Sr.No.Action & Description
1destroy

This action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

2disable

This action disables all tabs. This method does not accept any arguments.

3disable( index )

This action disables the specified tab. Where index is the tab to be disabled.

4enable

This action activates all the tabs. This signature does not accept any arguments.

5enable( index )

This action activates a specified tab. Where index is the tab to be enabled.

6load( index )

This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load.

7option( optionName )

This action gets the value currently associated with the specified optionName.

8option

This action gets an object containing key/value pairs representing the current tabs options hash.

9option( optionName, value )

This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

10option( options )

This action sets one or more options to the tabs.

11refresh

This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option.

12widget

This action returns the element serving as the tabs widget, annotated with the ui-tabs class name.

8. Animated Zooming Tabs (CSS)

Changing the active state of the tab link is relatively the same as showing/hiding the tab content. First, we look for jQuery(this), which is the current anchor link being clicked.

Then we find it’s parent list item with .parent('li') tag. After that, we give that parent list item a class of .active by using .addClass('active').

Lastly, we find all siblings of that parent list item and remove, if any, classes of .active by using .siblings().removeClass('active').

6. Card Tabs (CSS)

You may notice that when you click an anchor link with an #id specified instead of an actual URL, it tends to add the #id into the address bar.

http://sebkay.com becomes http://sebkay.com/#id. This can be a massive pain-point for users when trying to click the back button.

To get past that UX problem we use:. This handy little function stops the default action of the clicked element from happening.

Related Articles

Remember when we put that function(e)at the start of our click event? Well, this is where that ties in. You may not like the way it just jumps to the new tab content without any nice animation of any kind, well here’s some extra credit.

Sr.No.Event Method & Description
1activate(event, ui)

This event is triggered after the tab has been activated (after the completion of animation).

2beforeActivate(event, ui)

This event is triggered before a the tab has been activated.

3beforeLoad(event, ui)

This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made.

4create(event, ui)

This event is triggered when tabs are created.

5load(event, ui)

This event is triggered after a remote tab has been loaded.

14. Set Of Different CSS Tabs

To apply these changes simply replace the below snippet with the other code snippets that follow. If you’re reading this conclusion, (most people, including me, tend to leave after they’ve got the code they were after), then please leave a comment below with any problems or bugs regarding this tutorial.

I’m writing this to help people learn and become the best they can be. You might also like: 21 Must-Have Front End Development Tools.

I have put together a whole range of different tabs (CSS) that you can use in your web projects.


Whether you are looking for inspiration or want to learn how it is done, you will for sure find something you like in this article.