data.chinahighlights.com/js/expand-info.js

/**
 * @Desc: pure JS; expand & collapse
 */
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;
  // let slideUp = (target, 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;
  // let slideDown = (target, 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);
}
/*!
 * * depend on
 * /js/jquery-1.11.3.min.js
 */
$(function () {
  // $("div[collapse]").each(function (index, element) {
  //   var $collapseDiv = $(element);
  //   $collapseDiv.click(function () {
  //     var collapseStatus = $collapseDiv.attr("collapse-status");
  //     var targetId = $collapseDiv.data("target");
  //     var targetIconId = $collapseDiv.data("target-icon");
  //     var $targetElement = $("#" + targetId);
  //     var $targetIcon = $("#" + targetIconId);
  //     if (collapseStatus == undefined || collapseStatus == "show") {
  //       $targetIcon.removeClass("CloseIcon");
  //       $targetIcon.addClass("OpenIcon");
  //       $collapseDiv.attr("collapse-status", "hide");
  //       $targetElement.slideUp();
  //     } else {
  //       $targetIcon.removeClass("OpenIcon");
  //       $targetIcon.addClass("CloseIcon");
  //       $collapseDiv.attr("collapse-status", "show");
  //       $targetElement.slideDown();
  //     }
  //   });
  // });
  // $(".expandAll").click(function () {
  //   var obj = $(this);
  //   var all_status = obj.attr("collapse-status");
  //   if (all_status == "hide") {
  //     obj.attr("collapse-status", "show");
  //     obj.children(".Icon").removeClass("OpenIcon").addClass("CloseIcon");
  //     obj.children(".expandAllText").html("Collapse All");
  //     obj.parents(".container").eq(0).find(".tourDatesBJ span[id$='Icon']").removeClass("OpenIcon").addClass("CloseIcon");
  //     obj.parents(".container").eq(0).find(".ItineraryContent").slideDown();
  //     obj.parents(".container").eq(0).find(".tourDatesBJ").attr("collapse-status", "show");
  //   } else {
  //     obj.attr("collapse-status", "hide");
  //     obj.children(".expandAllIcon").removeClass("CloseIcon").addClass("OpenIcon");
  //     obj.children(".expandAllText").html("Expand All");
  //     obj.parents(".container").eq(0).find(".tourDatesBJ span[id$='Icon']").removeClass("CloseIcon").addClass("OpenIcon");
  //     obj.parents(".container").eq(0).find(".ItineraryContent").slideUp();
  //     obj.parents(".container").eq(0).find(".tourDatesBJ").attr("collapse-status", "hide");
  //   }
  // });
  // dayTourList 下其他元素触发 展开折叠
  $(".toBJ").each(function (index, element) {
    $(element).click(function () {
      $(element).parents(".dayTourList").eq(0).find(".tourDatesBJ").trigger("click");
    });
  });

});