From 463cd6913e6a2b15ca2be08557e1a0993fe27b98 Mon Sep 17 00:00:00 2001
From: candice <candice@hainatravel.com>
Date: Wed, 31 May 2023 11:11:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/mobile_first/ch-info-page-form.php  | 122 +++++++++++++++++-
 1 file changed, 120 insertions(+), 2 deletions(-)

diff --git a/application/views/mobile_first/ch-info-page-form.php b/application/views/mobile_first/ch-info-page-form.php
index 1413bef6..b234f4b6 100644
--- a/application/views/mobile_first/ch-info-page-form.php
+++ b/application/views/mobile_first/ch-info-page-form.php
@@ -1,5 +1,11 @@
-<div class="tmbottom">
-    <p style="padding: 15px 15px 30px 15px;">Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.</p>
+<div class="tripnotes" collapse="" collapse-status="hide" data-target="tripnotes" data-target-icon="day4Icon" style="font-size: 25px;
+  color: #ad1818;
+  font-weight: 600;
+  font-family: 'Goudy Old Style';">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" style="padding-top: 60px; margin-top: 0;">
+
+   
     <form action="https://www.chinahighlights.com/secureforms/qi_save" id="quick_inquiry_form" method="post"
           name="quick_inquiry_form" novalidate="">
         <div class="InquiryBox">
@@ -439,6 +445,7 @@ margin-bottom: -25px;
          </div>
         -->
 </div>
+</div>
 <script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja"></script>
 <script src="https://data.chinahighlights.com/js/min.php?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js"></script>
 <script>
@@ -617,3 +624,114 @@ document.addEventListener('DOMContentLoaded', () => {
       });
 })
   </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>
\ No newline at end of file