Upcoming – Past Events Toggle

Description

• turn event page to 2 tabs with Upcoming events, Past events
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Click Gear icon on Event Page

#1.2. Click Advanced > Page Header Code Injection

#1.3. Add this code to right box

• If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1

<!-- 08.26c03v12 Upcoming - Past Events Toggle -->
<script>
window.EventsToggleConfig = {
  marginTop: '10px',
  marginBottom: '30px',
  gap: '30px',
  tabColor: '#666',
  activeColor: '#000',
  lineColor: '#000',
  lineHeight: '2px',
  underlineSpace: '15px'
};
</script>
<script src="https://code.beaverhero.com/event/0826c03v12toggleupcomingpastevents.js"></script>

#2. Customize

#2.1. To change tab color, tab active color, change lines

tabColor: '#666',
  activeColor: '#000',

#2.2. To change underline color, change line

lineColor: '#000',
  lineHeight: '2px',

#2.3. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Event Page > Add a Markdown Block

Add this code into Markdown

<script>
window.EventsToggleConfig = {
  marginTop: '10px',
  marginBottom: '30px',
  gap: '30px',
  tabColor: '#666',
  activeColor: '#000',
  lineColor: '#000',
  lineHeight: '2px',
  underlineSpace: '15px'
};
</script>
<script src="https://code.beaverhero.com/event/0826c03v12toggleupcomingpastevents.js"></script>