TAB-BOX

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Tab Menu Example</title>
</head>
<body>

  <div id="tabContainer"></div> <!-- Placeholder for dynamically generated tabs -->

  <script>
    // Function to generate a tab box
    function generateTabBox(tabCount, containerId) {
      const container = document.createElement('div');
      container.id = containerId;
      //container.style.backgroundColor = 'red';

      // Create tab menu div
      const tabMenu = document.createElement('div');
      tabMenu.style.display = 'flex';
      tabMenu.style.borderBottom = '1px solid #ccc';
      tabMenu.style.marginBottom = '20px';
      tabMenu.style.backgroundColor = 'red';

      // Create tab content wrapper
      const tabContentWrapper = document.createElement('div');

      for (let i = 1; i <= tabCount; i++) {
        // Create tab buttons
        const tabButton = document.createElement('button');
        tabButton.innerText = `Tab ${i}`;
        tabButton.style.backgroundColor = '#f1f1f1';
        tabButton.style.border = 'none';
        tabButton.style.padding = '10px 20px';
        tabButton.style.cursor = 'pointer';
        tabButton.style.outline = 'none';
        tabButton.style.transition = 'background-color 0.3s';

        // Active tab styling for the first tab
        if (i === 1) {
          tabButton.style.backgroundColor = 'orange';
          tabButton.classList.add('active');
        }

        // Event listener for tab switching
        tabButton.onclick = function (event) {
          openTab(event, `Tab${i}`);
        };

        tabMenu.appendChild(tabButton);

        // Create tab content
        const tabContent = document.createElement('div');
        tabContent.id = `Tab${i}`;
        tabContent.style.display = i === 1 ? 'block' : 'none';
        tabContent.style.padding = '20px';
        tabContent.style.border = '1px solid #ccc';
    ...