DEV Community: Razvan Zamfir

Building simple tabs with HTML, CSS, and Vanilla JavaScript.

Razvan Zamfir — Fri, 15 May 2026 11:47:53 +0000

Razvan Zamfir

May 15

Building Simple Tabs with Vanilla JavaScript

#javascript #css

Comments

2 min read

Building Simple Tabs with Vanilla JavaScript

Razvan Zamfir — Fri, 15 May 2026 11:26:06 +0000

Tabs are one of those UI patterns you see everywhere — dashboards, settings pages, pricing sections, docs, etc.

In this post, we’ll build a fully working tab system using only HTML, CSS, and JavaScript.

HTML Structure

The HTML Structure is minimalistic:

<div class="tabbed-content">
  <ul class="tabs" role="tablist">
    <li role="tab" aria-selected="true" class="active">Tab 1</li>
    <li role="tab" aria-selected="false">Tab 2</li>
    <li role="tab" aria-selected="false">Tab 3</li>
  </ul>

  <div class="content">
    <div class="show">
      <h2>Tab 1 content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>

    <div>
      <h2>Tab 2 content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>

    <div>
      <h2>Tab 3 content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

As you can see, on page load, the first tab has the class name active, and the first panel has the class name show. The aria-selected attribute helps with accessibility.

The CSS Styling

.tabbed-content {
  margin: 10px auto;
  max-width: 500px;
}

.tabs {
  display: flex;
}

.tabs li {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  background: #eee;
  cursor: pointer;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabs li.active {
  border-bottom: 1px solid #fff;
  background: #fff;
}

.content {
  padding: 10px;
  border: 1px solid #ddd;
  border-top: none;
}

.content > div {
  display: none;
}

.content > div.show {
  display: block;
}

.content h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.content p {
  font-size: 14px;
}

The JavaScript Logic

const tabbedContent = document.querySelector('.tabbed-content');
const tabs = tabbedContent.querySelectorAll('.tabs li');
const contentItems = tabbedContent.querySelectorAll('.content > div');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // Reset all tabs
    tabs.forEach((t) => {
      t.classList.remove('active');
      t.setAttribute('aria-selected', 'false');
    });

    // Hide all content
    contentItems.forEach((item) => {
      item.classList.remove('show');
    });

    // Activate clicked tab
    tab.classList.add('active');
    tab.setAttribute('aria-selected', 'true');

    // Show matching content
    contentItems[index].classList.add('show');
  });
});

How It Works

We match Tab 1 to Content 1, Tab 2 to Content 2, and Tab 3 to Content 3 by using index: tabs.forEach((tab, index) => {}). So when a tab is clicked, we show the corresponding panel with contentItems[index].classList.add('show').

Before activating a new tab, we always reset everything using:

tabs.forEach(t => {
  t.classList.remove('active');
});

contentItems.forEach(item => {
  item.classList.remove('show');
});

This ensures only one tab is active and only one panel is displayed at a time.

Conclusion

In conclusion, each tab controls one content panel, and everything else is just state management.

No frameworks needed. You can take these tabs and style them as you need.

Longest Word JavaScript challenge

Razvan Zamfir — Sat, 11 Feb 2023 13:41:25 +0000

Coderbyte has this challenge among the free ones:

Have the function LongestWord(sen) take the sen parameter being passed and return the longest word in the string. If there are two or more words that are the same length, return the first word from the string with that length. Ignore punctuation and assume sen will not be empty. Words may also contain numbers, for example "Hello world123 567".

Here is my solution, with explanations in the form of comments:

function LongestWord(sen) { 
  // An aray of words made up of letters only
  let cleanWords = [];

  let words = sen.split(' ');
  words.forEach(word => {
    // Clean up the words and push them into "cleanWords"
    cleanWords.push(word.replace(/[^a-zA-Z0-9]/g, ''));
  });

  // Order by size
  let cleanWordsBySize = cleanWords.sort((a, b) => b.length - a.length);

  // Get the first
  return cleanWordsBySize[0];
}

It passed all the tests. :)

Meet Brave CMS 2.0

Razvan Zamfir — Sat, 11 Feb 2023 13:15:06 +0000

Brave CMS 2.0 is fresh out of the oven.

What it offers

It offers UI/UX developers and designers the possibility easily turn their static templates into websites powered by MySQL and Laravel.

What makes it so great

It is great for several reasons:

It's written in Laravel 8.
It's scalable.
The code is DRY and easy-to-follow, so contributors will have no headaches.
The newsletter form is integrated with Mailchimp.
It's Admin is designed with Bootstrap 5 SASS and very easy to customize.
It is free (but patrons will be appreciated).

Video demo

It has an easy-to-follow installation guide so try it out. It is free on GitHub. If you like it, give it a star.

Meet Brave CMS

Razvan Zamfir — Wed, 31 Mar 2021 09:18:49 +0000

I have been working on this CMS and I am hoping that a lot of people will find it useful.

What it is

It is an easy-to-use Content Management System built with the good old LAMP stack. I have called it Brave CMS (link to Github repo).

Video demo

What it offers

It offers UI/UX developers and designers the possibility to very easily turn their HTML templates into database-powered websites.

I worked as a WordPress theme developer for quite a while and I have found turning an HTML template into a WordPress theme is time-consuming and tedious.

It is why I came up with Brave CMS. You can turn an HTML template into a Brave CMS template in half the time you would turn it into a WordPress theme.

Why is Brave CMS so easy to use?

For these 3 reasons:

Brave's themes are completely separated from the content manager.
Every theme is comprised of its views (Twig files) and its assets. As you very likely already know, Twig has a very clean and clear syntax.
The directory name of the active theme is stored in a variable named theme_directory. This variable is passed to the theme's master template file, layout.twig (the value held by the theme_directory variable is easy to change, from the Static_model model).

Why could the project use your help?

I believe Brave CMS has the potential to replace WordPress one day, but it needs contributions from more developers (smarter than I am).

So, if you know you are an outstanding PHP developer, feel free to contribute.

Awesome Online Newspaper CMS

Razvan Zamfir — Mon, 12 Oct 2020 15:18:15 +0000

I've made an open-source online newspaper application and I believe it is worth dedicating a bit of time to analyzing it.

I am proud of it but at the same time I realize it is not perfect. It is why I decided to write this short article with the main purpose of asking for constructive feedback.

A quick video demo of it in action

Technologies, frameworks

The technologies used are PHP, MySQL, JavaScript, Codeigniter 3 and Bootstrap 4.

How to use it

The deployment/installation process is very simple (it is the main reason I chose to make it with Codeigniter 3): you write the database credentials in application/config/database.php, then run the Install controller which will create all the necessary tables.

Then you register (after creating the necessary tables you are redirected to the account creation page) and... you are an author on your own online newspaper!

The next authors who register need their accounts to be approved by you. In other words, you are the editor-in-chief.

You choose who you collaborate with, the first created author account is also the admin account. You can test all that on a local (XAMPP, WAMP) server.

What I already know is not so great about it

It does not have a very clear separation between the Admin and the Frontend. I wish I could find a way to introduce themes for the Frontend.

If you like it

If you are a PHP professional and want to get involved in any way that's useful, please do.

The perfect way to check for a palindrome, in JavaScript

Razvan Zamfir — Sun, 20 Sep 2020 09:34:44 +0000

First, let's clarify what a palindrome is.

According to Wikipedia "a palindrome is a word, number, phrase, or other sequence of characters which reads the same backward as forward".

In the above definition, the word "reads" is key: a phrase like "Red rum, sir, is murder" is read, not written the same backward as forward. That is because of the punctuation and case.

The above is a clue for what the first two steps we need to take are: eliminate punctuation and spaces and force lower case.

After that, we can proceed with getting comparing the string to check with its reverse.

The function looks like this:

 const isPalindrome = (str) => {
  // Force to string
  // Eliminate punctuation and spaces
  // Force lower case
  // Split
  let arr = str.toString().replace(/[^A-Za-z0-9_]/g, "").toLowerCase().split('');

  // Join into one word
  let joined = arr.join('');

  // Reverse and join into one word
  let reverseJoined = arr.reverse().join('');

  //compare
  return joined == reverseJoined;
}

After making sure our expression-to-check is a string, we use str.replace(/[^A-Za-z0-9_]/g, "") to eliminate punctuation and spaces and force lowercase with toLowerCase().

We need to make an array from the resulted string, so that we get the reverse of the string by reversing the array and then joining it into a string. This is the "original" array:

let arr = str.toString().replace(/[^A-Za-z0-9_]/g, "").toLowerCase().split('');

The "original", lower case, no spaces, no punctuation string:

let joined = arr.join('');

The reversed string:

let reverseJoined = arr.reverse().join('');

Finally, the comparaison, that returns a Boolean:

return joined == reverseJoined;

And with that we are done making a palindrome checker that works for words and phrases too. You can see it in action here.