UI animation functionality partialy restored

src/main/resources/static/css/commons/r11form.css

@@ -383,4 +383,8 @@
 .section .content {
     padding: 15px 15px 30px 15px ;
     text-align: justify;
+}
+
+.hiddable.active {
+    display: none;
 }

src/main/resources/static/html/mock.html

@@ -19,7 +19,8 @@
                 </div>
                 <div>
                     <!-- h2 -->
-                    <div><h2>Your Message</h2></div>
+                    <div id="basicItemData" class="hiddable"><h2>Your Message</h2></div>
+                    <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span>1</span></h2></div>
                     <!-- save -->
                     <div>
                         <!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
@@ -64,11 +65,11 @@
                         <textarea id="bodyEditor" class="bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
                     </div>
                     <!-- show/hide -->
-                    <div class="clickable-text highlight">
+                    <div id="optional" class="clickable-text highlight">
                         <h3>&gt; show/hide advanced settings</h3>
                     </div>
                     <!-- advanced -->
-                    <div class="max-width with-padding">
+                    <div id="advanced" class="max-width with-padding">
                         <!-- tab menu -->
                         <div class="tabmenu medium-vertical-margin">
                             <button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
@@ -121,7 +122,7 @@
                     </div>
                 </div>
             </div>
-            <div class="tool-extention">
+            <div id="selectMenuContent" class="tool-extention">
                 <!-- header -->
                 <div>
                     <h2>Message List</h2>