You can add a toggle function to a button/icon/text easily by adding an additional JavaScript to your Landing Page.

Adding the js code of the unfolding section

1. To add Javascript code to your Landing page, you should head to the Landing Page settings while logged into the our Landingi application. You can get there by going to the Landing Pages tab (in the menu on the left hand side) -> then select the landing from the list and click on "Dashboard" -> go to the tab JavaScript codes -> add code.

🔥Here is the script you need to add: 🔥

<script>
    $('#SECTION ID').hide();
  $('#ICON/TEXT ID').click(function(){
    $('#SECTION ID').slideToggle();
    setTimeout(function(){
      $('#ICON/TEXT ID').toggleClass('toggleCSS');
    }, 250);
  });
</script>

💡ADD-ON 💡

If you wish the ICON to rotate 180 degrees while the section is open, in the Custom CSS (right hand side of the editor) section of the editor, you should add following phrase:

.toggleCSS {
transform: rotate(180deg);
}


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

Editing the drop-down section js code

1. Now, once your JavaScript is added, you should adjust it accordingly. Add to the script SECTION ID and ICON/TEXT ID according to your Landing Page.

These codes can be found in the editor of your Landing Page. Just click on the ICON/TEXT, copy the CODE ID and paste it into your JavaScript code.

2. Similarly with the section you wish to be toggled: click on the desired SECTION, copy the SECTION ID and paste it into your JavaScript code.

Once that's done and SAVED, it should be working like this:

For more information about JavaScript codes head here.

If you encounter any troubles, let us know via chat 😉

Did this answer your question?