How to create a collapsible section in Salesforce LWC

Problem: We can create a collapsible section in Salesforce Lightning Web Component using slds-section slds-is-open LWC classes or HTML <details> tag. But we are are using LWC classes slds-section and slds-is-open we need to provide svg icon as given the below example:

Example 1:

The above code will trough you an error “Failed to load resource: the server responded with a status of 404 (Not Found) /assets/icons/utility-sprite/svg/symbols.svg:1”.

Solution:

We can you use HTML <details> tag in LWC component HTML code as shown below:

Output:

Section Closed

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Originally published at https://blog.webnersolutions.com on March 8, 2021.