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 \”);
 // Collapsible tabs for Product Information Tab
¬†$(\’h2:contains(\”Product Information\”)\’).html(\”Product Information \”);
// 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 ūüėé

Published by arpitpowerguide

My name is Arpit Shrivastava, who is a Microsoft MVP in the Business Applications category. I am a Microsoft Dynamics 365 and Power Platform enthusiast person who is having a passion for researching and learning new things and acquiring immense knowledge. I am providing consistent help, support, and sharing my knowledge through various Social Media Channels along with my Personal Blog, Microsoft Community, conducting online training and attending various 365 Saturday Events worldwide and sharing the best Solutions to the readers helping them achieve their goals and objectives in Customer Relationship Space.

7 thoughts on “Show Collapsible Tab in CRM Portal Entity Form

  1. Hi Arpit.Thank you for this post above… I have implemented the above code for my Portal and it is working but there seems to be 1 small issue that I hope you can help with… On load, the collapse icon show that the tab should be collapsed but it is still showing the tab content, then when I click on the collapsible icon, the icon changes to show the content again which it does, but when I click on the icon again to collapse the Tab, it works… It just seems to not work onload… Any comments or suggestions?

    Like

  2. Special thanks to (hackingsetting50@gmail.com) for exposing my cheating husband. Right with me i got a lot of evidences and proofs that shows that my husband is a fuck boy and as well a cheater ranging from his text messages, call logs, whats-app messages, deleted messages and many more, All thanks to (hackingsetting50@gmail.com), if not for him i will never know what has been going on for a long time. Contact him now and thank me later.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: