jQuery Semantic Tabs

In the early days of my career as a web developer, a task asked me to convert text to tabs. So, I opened a page of jQuery UI Tabs and then realized that wasn't a solution.

Here were the details of the task. There was a static field of HTML content. Each h3 tag must be a tab title. Content or all tags after h3 must be tab content. It was challenging for me as a junior and my jQuery skill was still limited. Honestly, that was easy enough. The code is even simple and short. Here let me show you.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

I named the plugin jQuery SemanticTabs. It is a jQuery plugin that can convert semantic HTML tags to tabs. You can get the source code at https://github.com/aristorinjuang/jquery.semantic-tabs or install it by npm with the command npm i jquery.semantic-tabs. Let's play the demo here.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Semantic Tabs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="semantic-tabs">
        <h3>Title 1</h3>
        <p>This is the content of 1.</p>
        <p>This is the content of 1.</p>
        <p>This is the content of 1.</p>
        <h3>Title 2</h3>
        <p>This is the content of 2.</p>
        <p>This is the content of 2.</p>
        <p>This is the content of 2.</p>
        <h3>Title 3</h3>
        <p>This is the content of 3.</p>
        <p>This is the content of 3.</p>
        <p>This is the content of 3.</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../jquery.semantic-tabs.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

The content of semantic-tabs is good. Let's convert it to tabs to bring a better user experience.

1
2
3

$('#semantic-tabs').semanticTabs({
    head: 'h3'
});

Plugins simplify our code. We set the head of the tab to be h3 while the default is also h3. In case to show you that is the most common option. Let's check the result.

Let me explain the source code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

(function ( $ ) {
 
    $.fn.semanticTabs = function( options ) {

        var settings = $.extend({
            componentClass: 'semantic-tabs-component',
            head: 'h3',
            headsID: 'semantic-tabs-heads'
        }, options );

        this.prepend( `<ul id="${settings.headsID}"></ul>` );
        this.find( settings.head ).each(function( i ) {
            $( this ).hide().nextUntil( settings.head ).wrapAll( `<div class="${settings.componentClass}-${i} ${settings.componentClass}"></div>` );
            $( `#${settings.headsID}` ).append( `<li class="${settings.componentClass}-${i} ${settings.componentClass}">${$( this ).text()}</li>` );
        });
        this.find( `#${settings.headsID} li` ).on( 'click', function() {
            var component = $( this ).attr( 'class' ).split(' ')[0];

            $( `li.${settings.componentClass}` ).removeClass( 'active' );
            $( `li.${component}` ).addClass( 'active' );
            $( `div.${settings.componentClass}` ).hide();
            $( `div.${component}` ).show();
        });
        $( `li.${settings.componentClass}-0` ).addClass( 'active' );
        $( `div.${settings.componentClass}` ).hide();
        $( `div.${settings.componentClass}-0` ).show();
    
        return this;

    };
 
}( jQuery ));
  1. We declared three options; componentClass, head, and headsID in the settings variable.
  2. We create the list of heads while wrapping the content after the h3 tag with the div tag.
  3. We set the function for the click event.
  4. We set the initial state.

What happens when the head gets clicked is:

  1. We remove the active class for all heads.
  2. We put the active class to the clicked one.
  3. We hide all tab contents.
  4. We show only the active one of the tab content.

No CSS from this plugin. You only need to style your tabs only.

Some people said that jQuery is dead. I think because today is the era of client-side rendering. People prefer to play with React, Vue, and Angular. But when it comes to server-side rendering, you will need jQuery. jQuery simplifies our code of JavaScript to be painless. So, I think it is a must-have skill for today too, especially for web developers.

Feel free to contribute to this plugin. Create a merge request for it then assign it to me. Maybe you can add some features, and options, or make the code to be better or faster.

References

Related Articles