Collapsing the past events listing

Need help creating code to have the past events collapse and toggle

3 Likes

Greetings and welcome to the Elfsight family, @Stacy_Messerschmidt :wave:

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 :wink:

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

Hi @Stacy_Messerschmidt :wave:

Sure! You can do this in the Language & Texts section on the Settings tab :slightly_smiling_face:

1 Like