Create a collapsible page section

collapsible_section.js

<script type="text/javascript">

  (function () { // Immediately invoked function enclosure

    var _store = [
      {
        section: '#lp-pom-block-160',
        content: '#lp-pom-box-322',
        button: '#lp-pom-button-245'
      },
      {
        section: '#lp-pom-block-335',
        content: '#lp-pom-box-337',
        button: '#lp-pom-button-277'
      },
      {
        section: '#lp-pom-block-340',
        content: '#lp-pom-box-342',
        button: '#lp-pom-button-278'
      }
    ];

    var _visible;
    var _hidden;
    var _toggleContentTop = $(_store[0].content).position().top;

    var setup = function (setup_obj) {

      // console.log('Using setup_obj:', setup_obj);
      var toggleSection = $(setup_obj.section);   // Replace with ID of your collapsible page section
      var toggleContent = $(setup_obj.content);   // Replace with ID of box containing hidden/visible content
      var toggleButton = $(setup_obj.button);     // Replace with ID of button that toggles section

      var sectionHeight = $(toggleSection).height();  // Height of section to show/hide
      var toggleContentTop = _toggleContentTop;       // Top value of content

      toggleSection.css("display", "none");
      toggleContent.css("display", "none");

      // console.log('Set display:none; for ' + setup_obj.section + ' and ' + setup_obj.content)

      // var otherSections = toggleSection.nextAll();
      var otherContent = toggleContent.siblings();
      // console.log('otherSections', otherSections);
      // console.log('otherContent', otherContent);

      var is_hidden = false;

      var moveStuff = function (collapse = true) {
        if (is_hidden) {
          for (var i = 0; i < otherContent.length; i++) {
            var content = $(otherContent[i]);
            var contentTop = content.position().top;
            //Is this element below toggleContent?
            if (contentTop > toggleContentTop) {
              if (collapse) {
                content.animate({top: "+=" + sectionHeight + "px"}, 600)
              } else {
                content.animate({top: "+=" + sectionHeight + "px"}, 10)
              }
            }
          }
          is_hidden = false;
        } else {
          for (var i = 0; i < otherContent.length; i++) {
            var content = $(otherContent[i]);
            var contentTop = content.position().top;
            //Is this element below toggleContent?
            if (contentTop > toggleContentTop) {
              if (collapse) {
                content.animate({top: "-=" + sectionHeight + "px"}, 600)
              } else {
                content.animate({top: "-=" + sectionHeight + "px"}, 10)
              }
            }
          }
          is_hidden = true;
        }
      }

      //Run moveStuff to adjust content on load
      moveStuff();

      var hide = function () {
        toggleSection.toggle();
        toggleContent.toggle();
        moveStuff(false);
      }

      if (!setup_obj.hide) {
        setup_obj.hide = hide
      }

      var execute = function () { // ID of button/trigger
        if (_visible && _visible !== setup_obj.section) {
          hideCurrentlyVisible()
        }
        toggleSection.slideToggle('slow');
        toggleContent.slideToggle('slow');
        moveStuff();
        if (!is_hidden) {
          updateVisible(setup_obj.section)
        } else {
          updateHidden()
        }
        // console.log('Current _visible section_id = ' + _visible)
        // console.log('Current _hidden array = ', _hidden)
      }


      toggleButton.click(execute);

    }

    var hideCurrentlyVisible = function () {
      if (_visible) {
        var exec_func;
        _store.forEach(function (obj) {
          if (obj.section === _visible) {
            exec_func = obj.hide
          }
        })
        if (exec_func) {
          exec_func();  // Will hide the currently visible section
          updateHidden()
        } else {
          console.log('Error! Couldnt find exec function for ' + _visible)
        }

      }
    }

    /* Add all entries to hidden */
    var updateHidden = function () {
      _visible = null;
      _hidden = [];
      _store.forEach(function (obj) {
        _hidden.push(obj.section)
      })
    }

    /* Add current section to _visible */
    var updateVisible = function (section_id) {
      _visible = section_id
      _hidden = [];

      _store.forEach(function (obj) {
        if (obj.section !== _visible) {
          _hidden.push(obj.section)
        }
      })
    }

    _store.forEach(function (setup_obj) {
      setup(setup_obj)
    })

  })()  // Invoke IIFE

</script>