jQuery Forum

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

For example in special case Zebra Accordion plugin (a tiny accordion plugin for jQuery) 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 (Closed, collapsed state) and remove that character and replace it with new character (like fa-chevron-up) as box title when expended(opened state).
I try below code but it seems that something is wrong:

1. $('.Zebra_Accordion').on('onOpen', function(e) {
         $(this).append( "<span class='fa fa-chevron-down'></span>" );
     });
   
   $('.Zebra_Accordion').off('onClose', 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.

How can use multiple toggle on one page?
I have two div in my HTML file and I want to hide or remove the child-1 div and then replace with another div child-2 when every time that clicking on parent title.

my HTML structure as below:

<div class="parent"> 
  <h2>Title One</h2>
  <div class='child_1'>paragraph 1</div>
  <div class='child_2'>paragraph 2</div>
</div>

<div class="parent"> 
  <h2>Title Two</h2>
  <div class='child_1'>paragraph 1</div>
  <div class='child_2'>paragraph 2</div>
</div>

and my jquery also is like below: $(document).ready(function(){ $('.child_1').show(); $('.child_2').hide(); $('.parent').click( function() { $(this).each( function() { $('.child_1, .child_2').toggle(); }); }); }); This work perfectly but when I click in one element other element also change. Please see here: JSFiddleJSFiddle.

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

For example in special case jQuery Collapsible Plugin (a jQuery plugin for collapsable boxes) or jQuery-Accordion or any other plugin defines some Events like below:

jQuery Collapsible Events:

Events triggered by plugin itself

Since version 2.0.0, there is no possibility to pass callback
functions via options. Instead, you may bind handlers to events which
are triggered by plugin. All events are namespaced (collapsable). In
table below, there are all events which might be triggered by plugin.
n all events, this refers to collapsable box from initial set.

1. expanded.collapsable: When box is fully expanded, this event is triggered. If you use jQuery function or custom function, it is triggered as a callback of those functions. Otherwise, it is called after fxDuration milliseconds.
2. collapsed.collapsable: Analogical to `expanded.collapsable`.

jQuery-Accordion Events:

1. accordion.open: fires when any accordion opens.
2. accordion.close: fires when any accordion closes.

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 new character (like fa-chevron-up) as box title when expended.

I try below code but it seems that something is wrong:

1.     $('.collapsable a.ca-link').on('collapsed.collapsable', function(e) {
2.           $(this).append( "<span class='fa fa-chevron-down'></span>" );
3.       });
4.      
5.     $('.collapsable a.ca-link').off('expanded.collapsable', function(e) {
6.           $(this).append( "<span class='fa fa-chevron-up'></span>" );
7.       });

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