javascript – Make Sibling Elements the Same Height When Only One Element Is Visible at a Time


I have a tab switcher using this method powered by just CSS and HTML:
https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css–cms-33111

The problem I am having is that each tab has different heights and it pushes the design elements below it around, I want to have each tab forced to be the height of the tallest one.

I found this method which works until you resize the page, where you end up with content overflowing the containers since it locks the height at page load.
https://snook.ca/archives/javascript/normalize-bootstrap-carousel-heights

So the method needs to be adaptable to changing the browser window size or changing device orientation.

Most solutions online seem to focus around CSS but if I am hiding all the other elements besides one at a time this the common suggestions of use flex-box / grid haven’t worked.

I am open to a CSS solution to this problem but it seems like JS or Jquery would be the best way to go. The site is also in WordPress so if PHP can be leveraged to accomplish this I would welcome that approach as well.

Thank you for your assistance!



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here