Show Collapsible Tab in CRM Portal Entity Form

Collapsible sections are perhaps the most fundamental of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label.

One of the major advantages of collapsing the content is that the headings become adjacent elements, giving the user an overview of the content available without having to scroll nearly so much. Expanding the content is choosing to see it.

Recently, I came across one requirement on Portal where I had to show the Collapsible Tabs same like in CRM. I've been hunting the web for answers to this and have not found anything of genuine help. So I have written my own code like I always do 😜in order to achieve the same.

Here we go...

$(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();

    });

 });

Note: Change the code as per your need, like you will have to change the Tab name, Tab Text (highlighted in the bold letter) in order to work smoothly in your case

Output:

Cheers 😎