If you want to make some sections on your landing pages hidden by default, and unfolding to become fully visible after clicking on another, specified sections, you will probably find this solution useful.

Please see that mechanism in action, on a sample landing page:
http://b69a07f8.dotests.com/

First, create at least a pair of sections, as the first one will be a trigger the second one will be unfolding and folding. You can create as many pairs as you want, just keep in mind that the script is designed to work on pairs of these elements.

Once created, a trigger section must receive a class "section-toggle".

You do not need to add any class for the folding section, just make sure that it is located right below the "section-toggle" element.

Then paste the below code into JavaScript code bookmark, in the landing page dashboard:

<script>

  var options = {
    iconClass: 'fa-plus-circle',
    iconClassAfter: 'fa-minus-circle',
    iconSize: '35px',
    iconColor: '#3681d0',
    iconTop: '35px',
    iconLeft: '50px'
  };

  var sectionToggleDiv = $('.section-toggle');

  sectionToggleDiv.each(function (index, div) {
    var $section = $(div).next();
    $section.hide();

    var icon = document.createElement('i');
    icon.classList.add('fa');
    icon.classList.add(options.iconClass);
    icon.setAttribute('style', 'font-size: ' + options.iconSize + '; position: absolute; color: ' + options.iconColor + '; top: ' + options.iconTop + '; left: ' + options.iconLeft + ';');
    $(div).find('div div.container').append(icon);

    $(div).click(function (e) {
      e.preventDefault();
      $section.slideToggle();
      icon.classList.toggle(options.iconClass);
      icon.classList.toggle(options.iconClassAfter);
    });

  });
</script>

That is enough to use sections with exactly the same icons, as in our example landing page. However, you can use different icons as well as modify their size and color etc.. To do so, you need to modify values of appropriate properties in "options" object:

iconClass - sets the icon used in the trigger section. You can select another icon, by using its name. As you can see, all the icons in our editor have names created by the following pattern:

You will find these names in the icon widget selection menu, opening after double click on an icon widget, in the editor.

iconClassAfter - works in the same way as iconClass, but it sets the icon which replaces the default icon visible when the section is folded (by default it is a plus sign).

iconSize - sets the size of the icons, expressed in pixels (other, valid formats like em can also be used).

iconColor - sets the color of the icons, expressed in hexadecimal value (other, valid formats like rgb can also be used).

iconTop - sets the position of the icon, by adjusting its distance from the top border of the section.

iconLeft - sets the position of the icon, by adjusting its distance from the left border of the section.

If you need to modify this solution further, please feel free to tailor the script to your requirements.

Did this answer your question?