How to load content on scroll and click?

I have the following layout.

BODY
–HERO
–SECTION_1
–SECTION_2
–SECTION_3
----ROW
------BUTTON A
------BUTTON B
------BUTTON C
------BUTTON D
–SECTION_X
----SUBSECTION A
----SUBSECTION B
----SUBSECTION C
----SUBSECTION D
–FOOTER

Currently page loads in 9-12 seconds with all Sections listed above.
When I Remove SECTION_X, page loads in 1.5-3 seconds.

I must accomplish the following:

  1. On page load, do not load SUBSECTION assets from SECTION_X (do not download assets or content from SEXTIONX)
  2. If click on BUTTON A - LOAD contents in SECTION_X----SUBSECTION_A
  3. If click on BUTTON B - LOAD contents in SECTION_X----SUBSECTION_B
  4. If click on BUTTON C - LOAD contents in SECTION_X----SUBSECTION_C
  5. If click on BUTTON D - LOAD contents in SECTION_X----SUBSECTION_D

^ How do I make pageload excluding SECTION X, then make a loading request ONLY after BUTTON A-D are clicked or tapped?

The following thread is similar to what I want to accomplish above, except I want to do with existing sections built in webflow instead of separate iframe:
https://stackoverflow.com/questions/19644575/load-content-into-div-only-on-click-with-additional


Here is my public share link: LINK
(how to access public share link)

2 Likes