Need help creating code to have the past events collapse and toggle
3 Likes
Greetings and welcome to the Elfsight family, @Stacy_Messerschmidt
No problem! We’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings:
.eapp-events-calendar-layout-pastEventsTitle {
position: relative;
}
.eapp-events-calendar-layout-pastEventsTitle::before {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 16px solid white;
transform: translate(-50%, -50%) rotate(180deg);
transition: transform 0.3s;
}
.eapp-events-calendar-layout-pastEventsTitle.show::before {
transform: translate(-50%, -50%);
}
And this code was placed in the Custom JS field on the Settings tab of your widget’s settings:
function listener(selector, callback) {
const firstTarget = document.querySelector(selector);
if (firstTarget) {
return callback(firstTarget);
}
const observer = new MutationObserver((_, observer) => {
const targetNode = document.querySelector(selector);
if (targetNode) {
observer.disconnect();
callback(targetNode);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function toggleEvents(events, toggle) {
if (toggle) {
events.style.height = 'auto';
events.style.overflow = 'auto';
} else {
events.style.height = '0';
events.style.overflow = 'hidden';
}
}
listener('.eapp-events-calendar-layout-pastEvents', (pastContainer) => {
const title = pastContainer.querySelector(
'.eapp-events-calendar-layout-pastEventsTitle'
);
const events = pastContainer.querySelector(
'.eapp-events-calendar-grid-component'
);
if (!title || !events) {
return;
}
toggleEvents(events, false);
let toggle = false;
title.addEventListener('click', () => {
toggle = !toggle;
title.classList.toggle('show');
toggleEvents(events, toggle);
});
});
Please check your website and let me know if you like the result
1 Like
IT LOOKS GREAT THANK YOU! I would like some text small that says to see past events click on arrow. is that possible?
2 Likes
1 Like