增加表单折叠

application/views/mobile_first/ah-info-page-form.php

@@ -1,10 +1,7 @@
 
-	<script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja"></script>
+	<div class="tripnotes" collapse="" collapse-status="hide" data-target="tripnotes" data-target-icon="day4Icon">Click here to plan your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.<span class="OpenIcon" id="day4Icon"></span></div>
+  <div class="tripnotescontent" collapse-content="" id="tripnotes" style="display: none; box-sizing: border-box;">
 <div class="tmbottom">
-    
-    
-    <h3 style="text-align: center;    font-size: 20px;    line-height: 22px;">Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.</h3>
-    
     <form action="/orders/quick_inquiry_save" method="post" novalidate="" id="info_page_form">
         <textarea id="form_additionalrequirements" name="additional_requirements" placeholder="E.g. This is a big trip for my birthday, anniversary, honeymoon, retirement, kid's graduation, bucket list…
 Our must-dos/must-sees are…" style="height:90px;"></textarea>
@@ -495,7 +492,9 @@ Our must-dos/must-sees are…" style="height:90px;"></textarea>
     </div>
 -->
     </div>
-
+    </div>
+</div>
+    <script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja"></script>
     <script src="https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js"></script>
     <script>
       
@@ -732,6 +731,117 @@ Our must-dos/must-sees are…" style="height:90px;"></textarea>
 		});
       })
         </script>
+        <script>
+            // 折叠展开
+            
+              document.querySelectorAll('div[collapse]').forEach(function ($collapseDiv, index) {
+                $collapseDiv.onclick = function (e) {
+                  let collapseStatus = $collapseDiv.getAttribute('collapse-status');
+                  let targetId = $collapseDiv.getAttribute("data-target");
+                  let targetIconId = $collapseDiv.getAttribute("data-target-icon");
+                  let $targetElement = document.getElementById(targetId);
+                  let $targetIcon = document.getElementById(targetIconId);
+                  if (collapseStatus == undefined || collapseStatus == "show") {
+                    $targetIcon.classList.remove("CloseIcon");
+                    $targetIcon.classList.add("OpenIcon");
+                    $collapseDiv.setAttribute("collapse-status", "hide");
+                    slideUp($targetElement);
+                  } else {
+                    $targetIcon.classList.remove("OpenIcon");
+                    $targetIcon.classList.add("CloseIcon");
+                    $collapseDiv.setAttribute("collapse-status", "show");
+                    slideDown($targetElement);
+                  }
+                }
+              });
+              document.querySelector('.expandAll').onclick = function (e) {
+                let obj = document.querySelector('.expandAll');
+                let all_status = obj.getAttribute("collapse-status");
+                if (all_status == "hide") {
+                  obj.setAttribute("collapse-status", "show");
+                  obj.querySelector(".expandAllText").innerHTML = "Collapse All";
+                  obj.parentNode.querySelectorAll("div[collapse] span[id$='Icon']").forEach(function(icon, i){
+                    icon.classList.remove('OpenIcon');
+                    icon.classList.add('CloseIcon');
+                  });
+                  obj.parentNode.querySelectorAll("div[collapse-content]").forEach(function(itinerary, i){
+                    slideDown(itinerary);
+                  });
+                  obj.parentNode.querySelectorAll("div[collapse]").forEach(function(title, i){
+                    title.setAttribute("collapse-status", "show");
+                  });
+                } else {
+                  obj.setAttribute("collapse-status", "hide");
+                  obj.querySelector(".expandAllText").innerHTML = "Expand All";
+                  obj.parentNode.querySelectorAll("div[collapse] span[id$='Icon']").forEach(function(icon, i){
+                    icon.classList.remove('CloseIcon');
+                    icon.classList.add('OpenIcon');
+                  });
+                  obj.parentNode.querySelectorAll("div[collapse-content]").forEach(function(itinerary, i){
+                    slideUp(itinerary);
+                  });
+                  obj.parentNode.querySelectorAll("div[collapse]").forEach(function(title, i){
+                    title.setAttribute("collapse-status", "hide");
+                  });
+                }
+              }
+              function slideUp(target, duration) {
+                duration = duration ? duration : 500;
+                target.style.transitionProperty = 'height, margin, padding';
+                target.style.transitionDuration = duration + 'ms';
+                target.style.boxSizing = 'border-box';
+                target.style.height = target.offsetHeight + 'px';
+                target.offsetHeight;
+                target.style.overflow = 'hidden';
+                target.style.height = 0;
+                target.style.paddingTop = 0;
+                target.style.paddingBottom = 0;
+                target.style.marginTop = 0;
+                target.style.marginBottom = 0;
+                window.setTimeout(() => {
+                  target.style.display = 'none';
+                  target.style.removeProperty('height');
+                  target.style.removeProperty('padding-top');
+                  target.style.removeProperty('padding-bottom');
+                  target.style.removeProperty('margin-top');
+                  target.style.removeProperty('margin-bottom');
+                  target.style.removeProperty('overflow');
+                  target.style.removeProperty('transition-duration');
+                  target.style.removeProperty('transition-property');
+                }, duration);
+              }
+            
+              function slideDown(target, duration) {
+                duration = duration ? duration : 500;
+                target.style.removeProperty('display');
+                let display = window.getComputedStyle(target).display;
+                if (display === 'none')
+                  display = 'block';
+                target.style.display = display;
+                let height = target.offsetHeight;
+                target.style.overflow = 'hidden';
+                target.style.height = 0;
+                target.style.paddingTop = 0;
+                target.style.paddingBottom = 0;
+                target.style.marginTop = 0;
+                target.style.marginBottom = 0;
+                target.offsetHeight;
+                target.style.boxSizing = 'border-box';
+                target.style.transitionProperty = "height, margin, padding";
+                target.style.transitionDuration = duration + 'ms';
+                target.style.height = height + 'px';
+                target.style.removeProperty('padding-top');
+                target.style.removeProperty('padding-bottom');
+                target.style.removeProperty('margin-top');
+                target.style.removeProperty('margin-bottom');
+                window.setTimeout(() => {
+                  target.style.removeProperty('height');
+                  target.style.removeProperty('overflow');
+                  target.style.removeProperty('transition-duration');
+                  target.style.removeProperty('transition-property');
+                }, duration);
+              }
+            </script>
         <style>
     .date_select {width: 27.5% !important; margin-bottom: 10px;}
     .age_range { margin-top: 45px;}