Haina
/
information-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加折叠

Browse Source
hotfix/paypal-note
candice 2 years ago
parent e98c755bd3
commit 463cd6913e
1 changed files with 120 additions and 2 deletions
Show Stats Download Patch File Download Diff File

122
application/views/mobile_first/ch-info-page-form.php
Unescape Escape View File

@ -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>
Write Preview
Loading…
Cancel
Save