diff --git a/source/development/index.rst b/source/development/index.rst
index ea9f1fc60..c07ce0fbb 100644
--- a/source/development/index.rst
+++ b/source/development/index.rst
@@ -39,6 +39,7 @@ Layout and UI
    Layout / Template usage <user-interface/layout-template-usage.rst>
    Classes and mixins <user-interface/css-classes.rst>
    Widgets <user-interface/widgets.rst>
+   Javascript function <user-interface/js-functions.rst>
 
 
 Help, I am lost !
diff --git a/source/development/user-interface/js-functions.rst b/source/development/user-interface/js-functions.rst
new file mode 100644
index 000000000..9baaf227e
--- /dev/null
+++ b/source/development/user-interface/js-functions.rst
@@ -0,0 +1,47 @@
+.. Copyright (C)  2016 Champs Libres Cooperative SCRLFS
+   Permission is granted to copy, distribute and/or modify this document
+   under the terms of the GNU Free Documentation License, Version 1.3
+   or any later version published by the Free Software Foundation;
+   with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
+   A copy of the license is included in the section entitled "GNU
+   Free Documentation License".
+
+
+Javascript functions
+####################
+
+Some function may be useful to manipulate elements on the page.
+
+Show-hide elements according to checkbox
+****************************************
+
+The function ``chill.listenerDisplayCheckbox`` will make appears / disappears elements according to a checkbox (if the checkbox is checked, the elements will appears).
+
+Usage
+=====
+
+The checkbox must have the data `data-display-target` with an id, and the parts to show/hide must have the data `data-display-show-hide` with the same value.
+
+On the same page, you should run the function ``chill.listenerDisplayCheckbox``.
+
+Example : 
+
+.. code-block:: html
+
+     <input data-display-target="export_abc" value="1" type="checkbox">
+     
+     <div data-display-show-hide="export_abc">
+     <!-- your content here will be hidden / shown according to checked state -->
+     </div>
+     
+     <!-- you could use the block "js" to render this script at the bottom of the page -->
+     <!-- {{ block js }} -->
+     <script type="text/javascript">
+        window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);   
+     </script>
+     <!-- {{ endblock js }} -->
+
+.. note:: Hint
+     
+     For forms in symfony, you could use the `id` of the form element, accessible through `{{ form.vars.id }}`. This id should be unique.
+