Equal Height Columns for Accordions

Support
#1

Hi,

I have two accordions in columns side by side like this :

I’ve made them equal height on large screens with this code ( wb-equipment is custom body class )

How can I get the column/accordion heights to match on all screen sizes so they don’t look like this? :

Accordion background-color when collapsed and accordion header placement below content
#2

Hi,

To achieve that, you need to add a unique class to your section element where your accordion resides.

Then add the code below in Cornerstone > JS

jQuery(window).on("resize", function () {
	var max = 0;
	jQuery(".mysection .x-accordion-body").each(function(index, el) {
         	if( jQuery(this).height() > max ){
			max = jQuery(this).height();
		}
                
	});
	jQuery(".mysection .x-accordion-inner").css('height', max);
}).resize();

Hope that helps

#3

Thanks Paul,

I tried this and the columns do remain equal in height but I now have this problem :

I added the class to the row containing the accordions ( see below ) - is this correct?

#4

Hi razorpig,

You need to add this custom class to the section containing these rows, click on this icon in this screenshot:

Then click on “Customize” to add your custom class, I’ve checked your website now and I noticed that you didn’t add the class yet, in case this doesn’t work as expected, then please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

#5

Thanks Alaa,

My apologies - I have a local copy of the site so I was using that for tesing. I’ve added the code and class to the live site and we’re almost there. Just a couple of issues :

  1. There is way too much empty space at the bottom of each accordion.
  2. I only need the top two accordions to match as they are side by side. Perhaps my original post was a little misleading. The lower accordion ie Jura WE8 doesn’t need to match the height, as again it leaves way too much empty space at the bottom.

If you need login details for the site let me know.

#6

Hello @razorpig,

Thanks for updating the thread. :slight_smile:

Can you please share login details (url/username/password) in a secure note for us to take a closer look?

Thanks.

#7

No problem. Here you go…

UPDATE : Apologies again, I was resizing my browser window and expecting the content to update dynamically. If I refresh the page at different sizes the top two columns look fine. I’d still like the lower accordion ( Jura WE8 ) to size independently of the other two though, if that’s possible.

Many Thanks !

#8

Hi There,

In that case, please apply the CLASS mysection on the section ROW instead of the entire section.


That way the accordion (Jura WE8) won’t be affected.

Cheers!

#9

Brilliant ! Thank you so much :slight_smile:

1 Like
#10