Unfolding section

31.01.2019

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 Add script button.

unfolding_section1

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;
}
unfolding_section2

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

II. Add classes to the elements in the editor

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

unfolding_section3

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

unfolding_section4

3. Publish your landing page.

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.