using laravel10 tailwind Flowbite how to programmatically show and hide a tab

Question

I have a simple two tab laravel blade page:

What i want to do is programmatically via javascript select a tab.

There are times when the page loads i need to display the second tab and not the first.

I am using jquery on this page.

<div id="tabs-div" class="mb-4 border-b border-gray-200 dark:border-gray-700">
        <ul id="admin-document-tabs" class="flex flex-wrap -mb-px text-sm font-medium text-center" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-purple-600 dark:border-purple-500" data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300" role="tablist">
            <li class="me-2" role="presentation">
                <button class="inline-block p-4 border-b-2 rounded-t-lg" id="documents-styled-tab" data-tabs-target="#styled-documents" type="button" role="tab" aria-controls="documents" aria-selected="false">Documents</button>
            </li>
            <li class="me-2" role="presentation">
                <button id="folder-button" class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="folders-styled-tab" data-tabs-target="#styled-folders" type="button" role="tab" aria-controls="folders" aria-selected="false">Folders</button>
            </li>
        </ul>
    </div>
    <div id="tab-content">

        <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-documents" role="tabpanel" aria-labelledby="documents-tab">
            <div id="documents" class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <div class="mt-1">
                        <form>
                            Documents
                        </form>
                    </div>

                </div>
            </div>

        </div>

        <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="styled-folders" role="tabpanel" aria-labelledby="folders-tab">

            <h4>Folders</h4>
        </div>

    </div>

Answer 1

kind of hacky but got it to work

    if ( showFolderTab == true){
        setTimeout(function(){
            $('#styled-documents').addClass('hidden');
            $('#styled-folders').removeClass('hidden');
            $('#documents-styled-tab').removeClass('inline-block p-4 border-b-2 rounded-t-lg text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500');
            $('#documents-styled-tab').addClass('inline-block p-4 border-b-2 rounded-t-lg dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300');
            $('#folders-styled-tab').removeClass('inline-block p-4 border-b-2 rounded-t-lg dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300');
            $('#folders-styled-tab').addClass('inline-block p-4 border-b-2 rounded-t-lg text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500');

            $("#documents-styled-tab").attr("aria-selected", "false");
            $("#folders-styled-tab").attr("aria-selected", "true");

            let el1 = document.getElementById("folders-styled-tab");
            el1.click();

        }, 100);
    }