Hey Amr - Checkout the post below. Sam, one of our awesome customers came up with a great dynamic height solution. I can’t say it will fit your use case exactly, but it would be a great starting point:

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>

@webim - the link you provided to https://test.webim.pro/unbounce/ is a blank page. Can you provide a corrected link, please?

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

I see it now, thanks.

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

Link

Hello,

How can I help you?

p/s: if you need any program support you can create the Project on Upwork: https://www.upwork.com/fl/widev

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

I used your code on my Unbounce landing page.

This is site url

I got this error

jquery-3.4.1.min.js:2 Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method ‘option’.

When I click the “Make your gift” button, if there is error for the missing field, due to the error section, this button will be hidden. So, I think your post is the best option.

Thanks in advanced

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

do you have the HTML markup for your accordion?

Hey folks

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