How can I collapse all tabs on page load?

Question

I am using Javascript code I got online to collapse and expand tabs. The issue is I want the tabs to be collapsed when the page loads and I cant figure out how to do this.

I am using this code from Arpits Dynamics CRM blog and I have altered the tab names.

Can anyone advise how I can get the tabs to collapse on load not only on click?

$(document).ready(function () {

 // Collapsible tabs for Customer Information Tab (change the tab name in your case)
$('h2:contains("Customer Information")').html("Customer Information <span id='collapseId' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandId' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");

 // Collapsible tabs for Product Information Tab
 $('h2:contains("Product Information")').html("Product Information <span id='collapseIdP' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandIdP' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");

// For Customer Information Tab

// Hide Collapse Icon on load
$('#expandId').hide();

// Show expand icon, hide collapse icon and show respective tab on click of collapse icon
     $("#collapseId").click(function () {

        $('#expandId').show();
        $('#collapseId').hide();
        $("div[data-name='{34a2992a-9rr9-s1a6-8f37-g2b2214fded6}']").fadeIn(1000);

    });

// Show collapse icon, hide expand icon and show respective tab on click of expand icon 
    $("#expandId").click(function () {

        $('#collapseId').show();
        $('#expandId').hide();
        $("div[data-name='{34a2992a-9rr9-s1a6-8f37-g2b2214fded6}']").fadeOut();

    });

// For Product Information Tab

$('#expandIdP').hide();

$("#collapseIdP").click(function () {

        $('#expandIdP').show();
        $('#collapseIdP').hide();
        $("div[data-name='tab_4']").fadeIn(1000);

    });

 $("#expandIdP").click(function () {

        $('#collapseIdP').show();
        $('#expandIdP').hide();
        $("div[data-name='tab_4']").fadeOut();

    });

 });

Answer 1

You have several approaches available to you:

1. Set visibility with CSS. jQuery's show() and hide() methods simply toggle the display property, so set it to none with a CSS class.

2. Use a class on each tab and call $('.that-class').hide(); on page load ( document.ready ).

Other advice: Most modern tab scripts don't rely on IDs because that creates tight coupling with your markup--if the IDs change or more are added you have to change your script. Use classes instead, and reference content by index or location. For example:

$('.my-tab-class').click(function() {
   $('.my-tab-content-class').hide(); // close all
   $(this).next('.my-tab-content-class').show(); // open just the adjacent one
}

Or, for tab content not adjacent:

$('.my-tab-class').click(function() { 
   var tabIndex = $(this).index();
   $('.my-tab-content-class').hide(); // close all

   // open just the one with the matching index location
   $('.my-tab-content-class').eq(tabIndex).show();
}

The same is true for indicator icons, etc. Reference them by location, not clumsy IDs or other specific strings:

$(this).find('.my-icon-class').toggle();