Dynamic Tabs to Dropdown on Mobile

This tutorial will guide you through converting tabs into a dropdown on mobile devices using JavaScript. The tabs will remain visible on larger screens, while a dropdown will be displayed on smaller screens.

Step 1: HTML Structure

Create a basic HTML structure with tabs and content sections:

<ul id="tabs">
    <li class="tab-item" data-index="1">Tab 1</li>
    <li class="tab-item" data-index="2">Tab 2</li>
    <li class="tab-item" data-index="3">Tab 3</li>
</ul>

<select id="tabDropdown"></select>

<div class="tabContent">Content for Tab 1</div>
<div class="tabContent">Content for Tab 2</div>
<div class="tabContent">Content for Tab 3</div>

Step 2: JavaScript for Dynamic ID Assignment and Dropdown Creation

Use the following JavaScript to dynamically assign IDs to the tabContent elements and create options in the dropdown menu:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tabs and contents
    const tabs = document.querySelectorAll('.tab-item');
    const contents = document.querySelectorAll('.tabContent');
    const dropdown = document.getElementById('tabDropdown');

    // Assign IDs to tabContent dynamically
    contents.forEach((content, index) => {
        const id = `tab${index + 1}`;
        content.id = id;

        // Create corresponding options in the dropdown
        const option = document.createElement('option');
        option.value = id;
        option.text = `Tab ${index + 1}`;
        dropdown.add(option);
    });

    // Tabs click event
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // Deactivate all tabs and hide all contents
            tabs.forEach(tab => tab.classList.remove('active'));
            contents.forEach(content => content.style.display = 'none');

            // Activate clicked tab and show corresponding content
            tab.classList.add('active');
            document.getElementById(tab.getAttribute('data-index')).style.display = 'block';

            // Sync dropdown
            dropdown.value = tab.getAttribute('data-index');
        });
    });

    // Dropdown change event
    dropdown.addEventListener('change', function() {
        // Deactivate all tabs and hide all contents
        tabs.forEach(tab => tab.classList.remove('active'));
        contents.forEach(content => content.style.display = 'none');

        // Activate selected option and show corresponding content
        const selectedTab = document.querySelector(`.tab-item[data-index="${this.value}"]`);
        selectedTab.classList.add('active');
        document.getElementById(this.value).style.display = 'block';
    });

    // Initialize first tab as active
    tabs[0].classList.add('active');
    contents[0].style.display = 'block';
    dropdown.value = 'tab1';
});
</script>

Step 3: CSS for Responsive Design

Use the following CSS to style the tabs and dropdown, ensuring the dropdown appears on mobile devices:

<style>
#tabs {
    display: flex;
    list-style: none;
    padding: 0;
}

#tabs li {
    padding: 10px 20px;
    background: #f4f4f4;
    cursor: pointer;
}

#tabs li.active {
    background: #ddd;
}

#tabDropdown {
    display: none;
}

@media screen and (max-width: 768px) {
    #tabs {
        display: none;
    }

    #tabDropdown {
        display: block;
    }
}
</style>

Conclusion

This approach allows you to create a responsive tab system that adapts to different screen sizes. On larger screens, the tabs will be displayed, while on smaller screens, a dropdown will be used to navigate between the content sections.

Published By: Krishanu Jadiya
Updated at: 2024-08-09 15:39:21