Hiding tabs when 1 is left

just noticed this scenerio...

I use this code all over the place, and it works, but when i needed to show TAB 2 only out of 3 tabs, it shows TAB1 page fields, when you click the "preview" text TAB2 is then shown...

code: (this is the view page..)

loadjs.ready("head", function () {
    // Client script
    <?php if (!$Security->IsSysAdmin()) { ?>
        $("li.nav-item > button.nav-link[data-bs-target='#tab_tbl_campaign_templates_library1']").hide();
        $("li.nav-item > button.nav-link[data-bs-target='#tab_tbl_campaign_templates_library3']").hide(); 
    <?php } ?> 
});

shows as:

these are the fields from page1

click on the "preview"

this is what should be display in immediately when the view page displays?

is this by design, can I force tab2 to display

not sure why the images are not displaying...

You should not hide tabs like that, you may want to read Bootstrap Tabs. You need to set the tab you want to show as active by adding the active CSS class.