How to add an accordion (collapsible/expandable section)

Overview

An accordion is a user interface pattern that allows users to expand or collapse sections of content. If you have a lot of content on your page, divided into sections, you may want t make each section expandible/collapsible using an accordion.

---

How to Set it up in Vacation Labs

Accordions can be set up in various places, such as itineraries, static pages, FAQ sections, etc.

Basically, wherever the rich text editor section is present, the accordion style can be set up.

For example, if you want to set it up in the Itinerary section, navigate to Products > Trips > Edit trips > Detailed Itinerary. Here, add the content and select the text that will be displayed as a heading. Then, choose the styles option and select "Accordion heading". For the content, select the content text and from the styles option, choose "Accordion content" and Save the changes.

Note: When pasting content into this section, please ensure that any existing formatting is removed. You can achieve this by pasting with CTRL+Shift+V or by using the "Remove Format" button in the rich text editor section.
If you paste pre-styled content into the rich-text editor, then it will interfere with the styles of the rich-text editor and the accordion may not work as expected.

Remove existing formatting

Similarly, the accordion feature can be configured in various locations where the Rich Text Editor section is available.

The accordion will be displayed as shown in the screenshot below.

• Related Articles

• How to add a new section on a page?

  Sections are the fundamental building blocks of your pages. Use them to add pre-designed content blocks like feature lists, testimonial cards, or product collections to customize your page's layout and content. Steps to Add a New Section Navigate to ...

• How to edit/add testimonials?

  To Edit Testimonials please follow the below steps, Login into Vacation labs Click on Website Click on Pages Select the page on which the testimonial needs to be added/edited Click on Testimonial Click on the Name of the testimonial to edit Edit the ...

• Add a script/code to trigger on a specifc page

  The Advanced Settings of the website allow you to add a script/code that can be triggered on a specific page. For example a tracking script that must be triggered on any one tour page because its being promoted or you are running ads for it. You can ...

• How to Add an Autoplay Video to a Page Banner

  You can enhance your website's homepage by adding an auto-playing video to the banner slider. This feature is ideal for short, engaging clips that play on a continuous loop. Important Considerations Before You Begin Performance Impact: Autoplaying ...

• How to add a Google Tag Manager script on your website?

  A GTM tracking script is like any 3rd party script and usually comes with instructions regarding where it needs to be added. GTM script is divided in 2 parts:  Part 1 - must be placed in the HEAD or HEADER section of the website Part 2 - must be ...