Tabs

Organize content into multiple panels with tabbed navigation.

Basic Tabs

Profile Information

This is the profile tab content. You can put user information, avatar, and personal details here.

Account Settings

This is the settings tab. Include preferences, security settings, and account configuration here.

Messages

This is the messages tab. Display conversations, notifications, and communication history here.

<div class="ethio-tabs">
  <ul class="ethio-tabs-list">
    <li>
      <button class="ethio-tabs-tab active" data-tab="tab1" data-tab-group="group1">
        Profile
      </button>
    </li>
    <li>
      <button class="ethio-tabs-tab" data-tab="tab2" data-tab-group="group1">
        Settings
      </button>
    </li>
  </ul>
  <div class="ethio-tabs-content">
    <div class="ethio-tabs-panel active" data-panel="tab1" data-panel-group="group1">
      <p>Tab 1 content</p>
    </div>
    <div class="ethio-tabs-panel" data-panel="tab2" data-panel-group="group1">
      <p>Tab 2 content</p>
    </div>
  </div>
</div>

<script>
const ethio = new ethioWDS();
function switchTab(tabId) {
  ethio.switchTab('group1', tabId);
}
</script>