The sections doesn't need to be static – thanks to additional script and classes you can create unfolding sections on your landing page.

How to create an unfolding section on the landing page?

I. Add JavaScript code to the landing page.

1. Log into Landingi application and go to the Landing Pages tab (in the menu on the left hand side) -> select the landing from the list and click on "Dashboard" -> go to the tab JavaScript codes -> click on the button "Add script".

2. Paste the script below in the newly opened window, in the body bottom of the main page.

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

💡ADD-ON 💡

If you wish the icon to rotate 180 degrees while the section is open, add the code below in the Custom CSS tab (right hand side of the editor) in the Page Settings of the editor.

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

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

NOTE: 💡
The CSS code is not necessary when you are using the text as a trigger to unfold and fold the section (unless you wish your text to be displayed upside down while the section is open).

2. Add classes to the elements in the editor

1. Go to the editor of chosen landing page. Create a section which is suppose to unfold. Select the section and give it the class "slideSection".

2. Select the icon/button/text which is suppose to be responsible for folding and unfolding the section and give it the class "slideTrigger".


3. Publish your landing page. If everything have been done right, it should be working like this:

Did this answer your question?