Reputation: 1887
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>
Upvotes: 0
Views: 276
Reputation: 1887
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);
}
Upvotes: 0