# Collapsing the past events listing
**URL:** https://community.elfsight.com/t/collapsing-the-past-events-listing/98276
**Category:** Customization
**Tags:** event-calendar
**Created:** [February 2, 2025, 5:02am UTC](https://community.elfsight.com/t/collapsing-the-past-events-listing/98276 "2025-02-02T05:02:01Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Stacy\_Messerschmidt](https://community.elfsight.com/u/Stacy_Messerschmidt)
#### Post date: [February 2, 2025, 5:02am UTC](https://community.elfsight.com/t/collapsing-the-past-events-listing/98276/1 "2025-02-02T05:02:01Z")
Need help creating code to have the past events collapse and toggle
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [February 3, 2025, 1:50pm UTC](https://community.elfsight.com/t/collapsing-the-past-events-listing/98276/3 "2025-02-03T13:50:20Z")
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:
```auto
.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:
```auto
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 😉
---
### Author:  [@Stacy\_Messerschmidt](https://community.elfsight.com/u/Stacy_Messerschmidt)
#### Post date: [February 5, 2025, 1:07pm UTC](https://community.elfsight.com/t/collapsing-the-past-events-listing/98276/4 "2025-02-05T13:07:56Z")
IT LOOKS GREAT THANK YOU! I would like some text small that says to see past events click on arrow. is that possible?
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [February 5, 2025, 1:25pm UTC](https://community.elfsight.com/t/collapsing-the-past-events-listing/98276/5 "2025-02-05T13:25:39Z")
Hi @Stacy_Messerschmidt 👋
Sure! You can do this in the Language & Texts section on the Settings tab 🙂
 