Unfolding section

Last Updated: 04.10.2019

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

I. Adding JavaScript code to Landing Page

1. Log into our platform. In the menu on the left side go to Landingi tab > then choose landing page from the list and click Dashboard.

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

UNS1_EN

3. In the 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 unfolding section, it is possible by adding 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;
}
UNS2_EN

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

II. Adding classes to the element in an editor

1. Go to the edition of the selected landing page and create section that, by default, should expand. Then, click on it and add the slideSection class to it.

UNS3_EN

2. Click on an element that should be responsible for expanding the section (e.g. icon, button or text) and give it the slideTrigger class.

UNS4_EN

3. Publish your landing page again.

Was this article helpful?

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.