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 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 ...

• How to add Alt tags to Images?

  Alt tags also called as alt descriptions or photo captions, alt tag is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps search engines to better crawl and rank your ...

• 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 ...

• What is a Collection Card section on website?

  The collection card section in Vacation Labs allows you to display the tours in a card layout on different static pages on your website. These card layouts usually have a specific information like Tour name, dates, price, availability, etc. These ...

• What is a Tour Card section on website?

  The tour card section in Vacation Labs allows you to display the tours in a card layout on different static pages on your website. These card layouts usually have a specific information like Tour name, dates, price, availability, etc. These cards ...