--- a/sat_templates/templates/default/static/common.js	Fri Sep 14 19:49:15 2018 +0200
+++ b/sat_templates/templates/default/static/common.js	Wed Oct 03 21:00:24 2018 +0200
@@ -43,19 +43,19 @@
     return available;
 }
 
-function toggle_clicked_class_tag(tag_name, class_name='clicked') {
+function toggle_clicked_class_tag(tag_name, class_name='state_clicked') {
     for (let elt of document.getElementsByTagName(tag_name)) {
         elt.classList.toggle(class_name);
     }
 }
 
-function toggle_clicked_class_sel(selectors, class_name='clicked') {
+function toggle_clicked_class_sel(selectors, class_name='state_clicked') {
     for (let elt of document.querySelectorAll(selectors)) {
         elt.classList.toggle(class_name);
     }
 }
 
-function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='clicked') {
+function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='state_clicked') {
     if (target_elem_id === null) { target_elem_id = trigger_elem_id; }
     document.getElementById(trigger_elem_id).addEventListener(
         "click",
@@ -65,6 +65,26 @@
     );
 }
 
+function tab_select(tab_btn_elt, tab_page_id) {
+    for (let elt of document.getElementsByClassName("tab__btn")) {
+        if (elt === tab_btn_elt) {
+            elt.classList.add('state_clicked');
+        }
+        else {
+            elt.classList.remove('state_clicked');
+        }
+    }
+    let tab_page_elt = document.getElementById(tab_page_id);
+    for (let elt of document.getElementsByClassName("tab__page")) {
+        if (elt === tab_page_elt) {
+            elt.classList.add('state_clicked');
+        }
+        else {
+            elt.classList.remove('state_clicked');
+        }
+    }
+}
+
 function get_elt(arg) {
     if (typeof arg === 'string') {
         // we should have an id
@@ -77,58 +97,73 @@
 }
 
 function clicked_cls(elt) {
-    /* toggle "clicked" class on each click, and remove "init" class if present */
-    // init
-    if (elt.classList.contains("init")) {
-        elt.classList.remove("init");
+    /* toggle "state_clicked" class on each click, and remove "state_init" class if present */
+    // state_init
+    if (elt.classList.contains("state_init")) {
+        elt.classList.remove("state_init");
     }
 
     // clicked
-    elt.classList.toggle("clicked");
+    elt.classList.toggle("state_clicked");
 }
 
-function clicked_mh_fix(arg) {
-    /* toggle clicked, and fix max-height on transitionend
+function clicked_mh_fix(arg, max_height) {
+    /* toggle state_clicked, and fix max-height on transitionend
      *
      * needed to workaround transition issue with max-height:none
      * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions,
      * thanks to Brandon Smith
      *
-     * @param arg: element to toggle (id as string, or element itself)
+     * @param arg(string, DOM element): element to toggle (id as string, or element itself)
+     * @param max_height(int): maximum height when collapsed (default to clientHeight)
      * */
     elt = get_elt(arg);
 
-    if (!elt.classList.contains("clicked")) {
+    if (!elt.classList.contains("state_clicked")) {
         /* expand */
-        var fix_expand = function(event) {
+        let fix_expand = function(event) {
             elt.removeEventListener("transitionend", fix_expand, false);
-            if (elt.classList.contains("clicked")) {
+            if (elt.classList.contains("state_clicked")) {
                 /* if event is clicked quicker than transition time,
                  * this callback can be called on reduce */
                 elt.style.maxHeight = "none";
             }
         };
 
-        elt.setAttribute('max_height_init', elt.clientHeight);
+        if (!elt.hasAttribute('_max_height_init')) {
+            elt.setAttribute('_max_height_init', max_height!==undefined?max_height:elt.clientHeight);
+        }
         elt.addEventListener("transitionend", fix_expand, false);
         clicked_cls(elt);
         elt.style.maxHeight = elt.scrollHeight + 'px';
+
     }
     else {
         /* reduce */
-        var transition_save = elt.style.transition;
+        let transition_save = elt.style.transition;
         elt.style.transition = '';
         requestAnimationFrame(function() {
             elt.style.maxHeight = elt.scrollHeight + 'px';
             elt.style.transition = transition_save;
 
             requestAnimationFrame(function() {
-                elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px';
-                elt.removeAttribute('max_height_init');
-                elt.style.maxHeight = null;
+                elt.style.maxHeight = elt.getAttribute('_max_height_init') + 'px';
             });
         });
 
         clicked_cls(elt);
     }
 }
+
+function createElement(html) {
+    /* create a DOM element from raw HTML
+     *
+     * @param html(string): raw HTML to parse
+     * @return: DOM element
+     */
+
+    let template = document.createElement('template');
+    template.innerHTML = html.trim();
+    new_element = template.content.firstChild;
+    return new_element;
+    }