Create a BootStrap accordion of upcoming events

This tutorial demonstrates how to create a course or set of events that occur on multiple dates and display them on a single page in a list format using a Bootstrap v5 accordion. Each event date can be expanded to reveal a booking form for that event.

Prerequisites

Ensure you have Bootstrap v5 already included in your theme.

Step 1: Create Recurring Events in Events Manager

Add a Recurring Event:

1. Go to your WordPress admin dashboard.
2. Navigate to Events > Add New.
3. Fill in the event details such as Event Name, Description, and Location.
4. Scroll down to the Event Date/Time section and click on Schedule Multiple Events.
5. Configure the recurrence pattern, specify the start and end date, and adjust other settings as needed.
6. Enable bookings by checking the Enable Bookings box and configure your tickets if necessary.
7. Click Publish to save your event.

Step 2: Create the shortcode

Use the [events_list] shortcode to list events with a specific tag and include your HTML along with Event Manager placeholders.

Here's how you can structure the shortcode to work with a Bootstrap v5 accordion:

HTML for Accordion Wrapper:

<div class="accordion" id="eventsAccordion">
  [events_list tag="your_tag" scope="future" limit="10"]
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading#_EVENTID">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse#_EVENTID" aria-expanded="true" aria-controls="collapse#_EVENTID">
        #_EVENTNAME - #_EVENTDATES at #_EVENTTIMES
      </button>
    </h2>
    <div id="collapse#_EVENTID" class="accordion-collapse collapse" aria-labelledby="heading#_EVENTID" data-bs-parent="#eventsAccordion">
      <div class="accordion-body">
        <h3>#_EVENTNAME</h3>
        <p>#_EVENTEXCERPT</p>
        <p>#_EVENTNOTES</p>
        #_BOOKINGFORM
      </div>
    </div>
  </div>
  [/events_list]
</div>

Explanation:

• Outer Accordion: The outer div with the class accordion wraps all the events.
• Accordion Items: Each event is wrapped in a div with the class accordion-item.
• Headers: Each event header is created with a button element which toggles the collapse state of the associated event content.
• Booking Form: The #_BOOKINGFORM placeholder dynamically inserts the booking form for each event.
• Placeholders: The placeholders (#_EVENTID, #_EVENTNAME, #_EVENTDATES, etc.) are dynamically replaced with the event data provided by Events Manager.

Step 3: Add the Shortcode to Your Page

1. Navigate to Pages:
   • Go to Pages > Add New or edit an existing page.
2. Use Elementor or Gutenberg:
   • If you're using a page builder like Elementor or the Gutenberg editor:
     • Add a "Shortcode" block/widget.
     • Paste the shortcode (including the accordion HTML structure) into the shortcode block.
     • Save and publish your page.

Conclusion

By following the above steps, you can display a set of recurring events in an accordion layout on a single page, with each event date expandable to reveal more details and a booking form.

This setup leverages the flexibility of Events Manager shortcodes and integrates smoothly with the Bootstrap v5 framework for a polished user experience.

For more details on Event Manager shortcodes and placeholders, you can refer to the Event Manager Shortcodes Documentation.