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

Expand and Collapse accordion in Elementor

In this post, 2nd article in our series, we will share how we took ChatGPT help to implement expand/collapse all accordion in elementor and using ™ or ® symbol directly in HTML instead of using superscript.

  • Expand/Collapse all accordion in Elementor using ChatGPT
  • Why you should use ™ or ® symbol directly in HTML instead of using superscript.

Expand/Collapse all accordion in Elementor using ChatGPT

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>

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

  1. 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.
  2. 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>

  1. 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.
  2. 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 .collapse-expand-all').click(function() {
var accordionContent = $(this).closest('.custom-accordion').find('.elementor-accordion-item');
var isCollapsed = accordionContent.first().hasClass('elementor-active');

if (isCollapsed) {
accordionContent.removeClass('elementor-active').find('.elementor-tab-content').slideUp();
} else {
accordionContent.addClass('elementor-active').find('.elementor-tab-content').slideDown();
}
});
});
</script>

  1. 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.
  2. 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.

Please give this method a try and let me know if you encounter any issues.

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

Refer this for my complete chat with ChatGPT - https://chat.openai.com/share/ffe89b05-2413-4afc-a371-7e7d7cf84663

So we went ahead and implemented the steps and code it shared, it required some tweak like elementor did not had My Templates and stuff like that. Anyways, the first solution did not work but then second solution it offered, it worked 90% but with some tweaks it made it to work :). Below is final result of our implementation.

 

 

 

Using ™ or ® symbol in HTML instead of using superscript

Until very recently in our projects where ever there was the need to implement copyright or registered trade mark symbol, we used <sup> tag. It use to work perfectly with no issues, however our chief designer he one day noticed that there was flaw with that approach. When using superscript, the font size of the TM would be same as that or body text, hence it didn't had a good visual experience.

Thus we decided that instead of using superscript we should just use the symbol - ™ or ®

Here are the two implementations -

With Superscript - Varshyl Technologies Pvt LtdTM

With Symbol - Varshyl Technologies Pvt Ltd™

You can notice the different in font size. For a naive user, it may look same but to seasoned eye, it is very noticeable.

And the symbol works perfectly across all devices and browsers. So, next time you need to implement any of these, you can just copy and paste these symbols to use them and render better visual experience to your users.

Author

  • Harish Sharma

    Entrepreneur and Technology Enthusiast | Started Varshyl Technologies, a web and mobile application development company, helping companies build and promote their digital presence. Co-founded Snapworks - a mobile first communication platform for schools. Outside VT, enjoys his morning workouts, reading biographies and golf.