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.
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.
The content of semantic-tabs is good. Let's convert it to tabs to bring a better user experience.
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.
- We declared three options;
- We create the list of heads while wrapping the content after the
h3tag with the
- We set the function for the click event.
- We set the initial state.
What happens when the head gets clicked is:
- We remove the
activeclass for all heads.
- We put the
activeclass to the clicked one.
- We hide all tab contents.
- We show only the active one of the tab content.
No CSS from this plugin. You only need to style your tabs only.
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.