improve doc for show/hide on collection

source/development/user-interface/js-functions.rst

@@ -45,7 +45,7 @@ In this module, the module will listen to all input given in the ``container_fro
 
     new ShowHide({
         froms: [from], // the value of from should be an iterable
-        container: [ressources_comment], // the value of container should be an iterable
+        container: [target], // the value of container should be an iterable
         test: function(froms, event) {
             // iterate over each element of froms
             for (let f of froms.values()) {
@@ -88,7 +88,77 @@ For achieving this, use the `event_name` option.
     });
 
 Examples
-========
+--------
 
 .. literalinclude:: js-functions/show_hide.js
    :language: javascript
+
+
+Using Show/Hide in collections forms
+====================================
+
+Using show / hide in collection forms implies: 
+
+* to launch show/hide manually for each entry when the page is loaded ; 
+* to catch when an entry is added to the form ;
+
+As the show/hide is started manually and not on page load, we add the option ``load_event: null`` to the options: 
+
+.. code-block:: javascript
+
+   new ShowHide({
+     load_event: null,
+     froms: [ from ],
+     container: [ container ],
+     test: my_test_function
+   });
+
+.. note:: 
+
+   When using ``load_event: null`` inside the options, the value of event will be ``null`` as second argument for the test function.
+
+   .. code-block:: javascript
+
+      my_test_function(froms, event) {
+          // event will be null on first launch
+      }
+
+Example usage: here, we would like to catch for element inside a CV form, where the user may add multiple formation entries.
+
+.. code-block:: javascript
+
+   import { ShowHide } from 'ShowHide/show_hide.js';
+
+   // we factorize the creation of show hide element in this function.
+   var make_show_hide = function(entry) {
+       let
+           obtained = entry.querySelector('[data-diploma-obtained]'),
+           reconnue = entry.querySelector('[data-diploma-reconnue]')
+       ;
+       new ShowHide({
+           load_event: null,
+           froms: [ obtained ],
+           container: [ reconnue ],
+           test: my_test_function
+       });
+   };
+
+   // this code is fired when an entry is added on the page
+   window.addEventListener('collection-add-entry', function(e) {
+       // if the form contains multiple collection, we filter them here:
+       if (e.detail.collection.dataset.collectionName === 'formations') {
+           make_show_hide(e.detail.entry);
+       }
+   });
+
+   // on page load, we create a show/hide 
+   window.addEventListener('load', function(_e) {
+       let
+           formations = document.querySelectorAll('[data-formation-entry]')
+           ;
+
+       for (let f of formations.values()) {
+           make_show_hide(f);
+       }
+   });
+