Expand/Collapse All accordion in Elementor, Using ™ or ® symbol in HTML instead of using superscript

Last week while working on the client project, we ran into an challenge where we had to implement expand/collapse all button in accordion in Elementor. As it turned out, the Elementor was missing this functionality and I was very surprised to know why they didn't had this feature. Looked around their forums and found that many users had requested this feature in past but nothing has been done yet.

So the possible was to either look for plugin or custom code. When looking for plugin, pretty much all of them were paid and there too I found just 1 plugin that fit the bill. So, we thought now that we have identified the paid plugin, lets first try to implement the expand/collapse all accordion with custom code, and this time let's do it bit differently. Ask ChatGPT to give us directions and code, it will be fun experiment.

Here is the my chat log with ChatGPT

=============================================

Harish - need help to add collpase/expand all button in elementor accordion widget

ChatGPT:

To add a collapse/expand all button in the Elementor Accordion widget, you'll need to make some modifications to the widget's code. Here's a step-by-step guide:

1. Edit the Accordion widget:
   • In the WordPress admin panel, go to "Elementor" > "My Templates."
   • Find the Accordion widget and click on the "Edit with Elementor" button.
2. Add the collapse/expand all button:
   • Inside the Accordion widget, add a new section above the existing accordion items.
   • In this section, add a button widget or a text widget.
   • Configure the button's label as "Collapse All" or "Expand All."
3. Add custom JavaScript code:
   • Click on the section containing the collapse/expand all button.
   • Go to the "Advanced" tab in the left sidebar.
   • Under the "Custom CSS" section, add a unique CSS class to the section. For example, "custom-accordion."
   • Save the changes to the section.
4. Add JavaScript code to the page:
   • Go back to the WordPress admin panel.
   • Navigate to "Elementor" > "Customizer."
   • Open the "Additional CSS" or "Custom CSS" section.
   • Add the following JavaScript code:

============

<script>
jQuery(document).ready(function($) {
$('.custom-accordion .elementor-accordion-title').click(function() {
$(this).closest('.custom-accordion').find('.elementor-accordion-content').slideToggle();
});

$('.custom-accordion .collapse-expand-all').click(function() {
var content = $(this).closest('.custom-accordion').find('.elementor-accordion-content');
var isCollapsed = content.first().is(':hidden');

if (isCollapsed) {
content.slideDown();
$(this).text('Collapse All');
} else {
content.slideUp();
$(this).text('Expand All');
}
});
});
</script>

=============

5. Update the JavaScript code:
   • Replace .custom-accordion with the CSS class you added to the section containing the collapse/expand all button.
   • Replace .collapse-expand-all with the CSS class or selector of your collapse/expand all button.
6. Publish the changes:
   • Save and publish the modifications to the Elementor Accordion widget and the custom JavaScript code.
   • Preview the page to see the collapse/expand all button in action.

By following these steps, you should be able to add a collapse/expand all button to the Elementor Accordion widget.

Harish - we implemented it but it didn't work

ChatGPT:

I apologize if the previous solution didn't work as expected. Let's try an alternative approach to adding a collapse/expand all button to the Elementor Accordion widget:

1. Edit the Accordion widget:
   • In the WordPress admin panel, go to "Elementor" > "My Templates."
   • Find the Accordion widget and click on the "Edit with Elementor" button.
2. Add a Custom HTML widget:
   • Inside the Accordion widget, add a new section above the existing accordion items.
   • Add a Custom HTML widget to the new section.
3. Add HTML code for the collapse/expand all button:
   • In the Custom HTML widget, add the following HTML code for the collapse/expand all button:

<button class="collapse-expand-all">Collapse/Expand All</button>

4. Add JavaScript code to the page:
   • Click on the section containing the collapse/expand all button.
   • Go to the "Advanced" tab in the left sidebar.
   • Under the "Custom CSS" section, add a unique CSS class to the section. For example, "custom-accordion."
   • Save the changes to the section.
5. Add JavaScript code to the page:
   • Go back to the WordPress admin panel.
   • Navigate to "Elementor" > "Customizer."
   • Open the "Additional CSS" or "Custom CSS" section.
   • Add the following JavaScript code: