Unfolding section

Last updated: June 30, 2021 Written by: Avatar Teresa
share
Table of contents
share
Table of contents

Sections do not have to be static – with the help of additional JavaScript code and giving classes to several elements, you can create expanded sections on your landing page. They can be used, for example, for FAQs.

Adding JavaScript code to a landing page

1. Log into our platform. On the left-side menu, go to the Landing Pages tab > then choose a landing page from the list and click Dashboard.

landing pages dashboard

2. From the Dashboard level, go to the JavaScript Code tab and click Add script.

slidesection javascript

3. In a new window, paste the new script in Body bottom position:

<script> 
  $('.slideSection').hide();
  $('.slideTrigger').click(function (event) {
    event.preventDefault();
    let target = $(event.target);
    target.closest('.widget-section').next('.slideSection').slideToggle();
    if (target.hasClass('widget-overlay')) {
      target.toggleClass('toggleCSS');
    } else {
      target.closest('.container').find('i').toggleClass('toggleCSS');
    }
  }) 
</script>

REMEMBER:

You cannot set the unfolding section in the last widget added to your landing page – it will not expand. If you want to have your last widget having the unfolding section, add one extra widget. In this way, the one before last will work.

Optionally:

If you want your icon to rotate by 180 degrees when the section is opened, in Custom CSS (right-side of the editor), you need to add the following code:

.toggleCSS {
	transition: 300ms linear all !important;
	transform: rotate(180deg) !important;
}

.slideTrigger {
	transition: 300ms linear all !important;
}

The CSS code is unnecessary if you use the text as a trigger for expanding and folding the section (once you use it, your text might be displayed upside down after expanding the section).

Adding classes to the element in an editor

1. Go to the editor of your landing page and create a section that, by default, should expand. Then, click on it, and in a right-side toolbar, scroll down until you find the Other tab. Type slideSection in the Classes field.

add class to section

2. Above the section, create another one with an element (e.g., icon, button, or text) that should be responsible for unfolding. Click on the element and give it the slideTrigger class.

add class to icon

3. Publish your landing page again.

share

Was this manual helpful?