Dynamic Section Height

While adding own styles to the page developers often face difficulties with the dynamic
changing DOM.
General page markup ( typical Unbounce Layout):

<div id="lp-pom-root">
    <div class="lp-positioned-content"> /* MAIN CONTAINER FOR ELEMENTS WITH POSITION=ABSOLUTE */ </div>
    <div id="lp-pom-block-XXX"> /* SECTION WITH POSITION=RELATIVE */
        <div id="lp-pom-block-XXX-color-overlay"></div>
        <div class="lp-pom-block-content"></div>
    </div> 
    <div id="lp-pom-block-YYY"> /* SECTION WITH POSITION=RELATIVE */
        <div id="lp-pom-block-YYY-color-overlay"></div> /* SECTION WITH POSITION=ABSOLUTE */
        <div class="lp-pom-block-content"></div> /* SECTION WITH POSITION=ABSOLUTE */
    </div> 
</div>

If we need to change a custom-element in a dynamic way, for instance *jquery*
accordion (#accordion), we need to deal with synchronous change:

• height of parental block
• positions of all the elements which are situated down the content
• height of the element itself

Otherwise, the element will be depicted incorrectly (overlapping).

Below you can see the fulfillment of this task using the example of the block FAQ which
consists of two accordion (#accordion_1, #accordion_2).

Example of implementation you can find by the link.

If you need to add animation or customize in some way the code please don’t hesitate to contact with me: https://www.upwork.com/fl/webim

<script>
			$(document).ready(function () {
				var accordionHeight = Math.max($('#accordion_1').height(), $('#accordion_2').height());
				var animate_acc1 = $('#accordion_1').accordion( "option", "animate" );
				var animate_acc2 = $('#accordion_2').accordion( "option", "animate" );
				var acc_wrapper = $('#accordion_1').closest('.lp-element');
				var acc_wrap_height = acc_wrapper.height();
				var acc_top = acc_wrapper.position().top;
				// Search blocks with top > acc_top;
				var blocks1 = [], acc_block;
				$('.lp-positioned-content>.lp-element').each(function(index, element) {
					if (!$(element).is(acc_wrapper) && ($(element).position().top > acc_top)){
						blocks1.push(element);
					}
				});
				$('#lp-pom-root>.lp-element').each(function(index, element) {
					var el_top = $(element).position().top;
					if ((el_top < acc_top) && (el_top + $(element).height() > acc_top)) {
						acc_block = $(element);
						return false;
					}
				});
				var collapse_page = function(event, ui) {
        			var currAccHeight = Math.max($('#accordion_1').height(), $('#accordion_2').height());
        			var diff = currAccHeight - accordionHeight;
        			accordionHeight = currAccHeight;
        			if (acc_wrap_height < currAccHeight) {
            			acc_wrapper.height(currAccHeight);
        			} else {
            			acc_wrapper.height(acc_wrap_height);
        			}
        			// Change height
					acc_block.height(acc_block.height()+diff);
					acc_block.find('div').each(function(index, el_div) {
						$(el_div).height($(el_div).height()+diff);
					});
        
        			$.each(blocks1, function(index, element) {
            			var el_top = $(element).position().top;
            			var new_top = el_top + diff;
            			$(element).css('top', new_top+"px");
        			});
    			}
    			$( "#accordion_1" ).on( "accordionactivate", collapse_page );
    			$( "#accordion_2" ).on( "accordionactivate", collapse_page );
			});
		</script>

Hi Sidney. Scroll down and check please the source code. On this page you can grab the script and check how it works by clicking on the accordion

Can anyone help me on my page? Having a hard time on editing the code
Link

can you help me on fixing the dropdown on my page? Page here

Hi everyone,
I’ve been trying to make a section which includes a HTML element (a widget) dynamic but without success. What I need is that the section with the widget increses or decreases his height depending on the content to show and so should do all the sections below (I need it to adapt).
Here is the page: https://meglioquesto.it/lp-verifica-copertura-eolo/
Is there a quite simple way to make it work?
Thanks!
Silvia

Hey folks 👋🏻

Linking another thread here that should be helpful if you’re looking for dynamic height custom code.