diff --git a/public/themes/dist_static/static/css/investment.css b/public/themes/dist_static/static/css/investment.css index 0b2264e..b483b67 100644 --- a/public/themes/dist_static/static/css/investment.css +++ b/public/themes/dist_static/static/css/investment.css @@ -292,6 +292,9 @@ padding: 0; list-style: none; } +.iv-learn__list:not(.is-expanded) .iv-learn__item:nth-child(n+7) { + display: none; +} .iv-learn__item { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr) auto; @@ -378,9 +381,19 @@ .iv-learn__more-icon--up { opacity: 0.35; transform: scaleY(-1); + transition: opacity var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); } .iv-learn__more-icon--down { opacity: 1; + transition: opacity var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); +} +.iv-learn__more.is-expanded .iv-learn__more-icon--up { + opacity: 1; + transform: scaleY(1); +} +.iv-learn__more.is-expanded .iv-learn__more-icon--down { + opacity: 0.35; + transform: scaleY(-1); } .iv-hotline { diff --git a/public/themes/dist_static/static/js/investment.js b/public/themes/dist_static/static/js/investment.js index 882b6a7..ead3c73 100644 --- a/public/themes/dist_static/static/js/investment.js +++ b/public/themes/dist_static/static/js/investment.js @@ -47,9 +47,24 @@ function initLearnItemClick() { if (href) window.location.href = href; }); } +function initLearnToggle() { + const list = document.querySelector(".iv-learn__list"); + const btn = document.querySelector(".iv-learn__more"); + if (!list || !btn) return; + const items = list.querySelectorAll(".iv-learn__item"); + if (items.length <= 6) { + btn.style.display = "none"; + return; + } + btn.addEventListener("click", () => { + list.classList.toggle("is-expanded"); + btn.classList.toggle("is-expanded"); + }); +} $(function() { setActiveNav(); initAnnounceSwiper(); initLearnItemClick(); + initLearnToggle(); }); //#endregion