How can I use jQuery plugins predefined events?

[mojtaba_reyhani]

How can I use jQuery plugins predefined events?
Most of the jQuery Plugins introduce predefined events in their documentation, Is there any rules in general for implementing those events?

For example in special case Zebra_Accordion Plugin (a tiny accordion plugin for jQuery) or jQuery-Accordion or any other plugin defines some Events like below:

Zebra Accordion Events:
onClose:
Event fired after a tab is collapsed.

onOpen:
Event fired after a tab is collapsed.

If I want in this case to add a div with special font awesome character (like fa-chevron-down) after box title when collapsed (collapsed state) and remove that character and replace it with a new character (like fa-chevron-up) as box title when expended.
I try below code but it seems that something is wrong:

$('.Zebra_Accordion').on('onOpen', function(e) {
      $(this).append( "<span class='fa fa-chevron-down'></span>" );
  });

$('.Zebra_Accordion').off('onClos', function(e) {
      $(this).append( "<span class='fa fa-chevron-up'></span>" );
  });

I’m beginner and not an expert, So please try to give a detailed answer or any reference as I don’t know anything about Plugins events and some other expressions.
Thanks

[samliew (webflowexpert.com)]

@mojtaba_reyhani

$('.Zebra_Accordion')

Are you sure this is the right selector on the published site? Do note that Webflow normalizes the class names, and they may be different from the one you set in the designer.