Creating a Parent Container to Maintain the Height of the Tallest Offspring

Question

Creating a Parent Container to Maintain the Height of the Tallest Offspring

I've been searching online for solutions, but so far I haven't found one that meets all the requirements.

<div class="parent">
    <div class="child1">I am 60px tall and always visible; my parent is 100px tall</div>
    <div class="child2">I am 80px tall and initially hidden until needed</div>
    <div class="child3">I am 100px tall and also hidden until needed</div>
</div>

I need to have multiple child Divs within a parent Div.
Only one child should be displayed at a time.
The height of the parent Div must match the height of the tallest child and not change.

I plan to use jQuery to handle toggling between the visible children, but I would prefer a CSS-based solution for setting the heights if possible.

No need to support IE8/9/10.

Does anyone have any suggestions?

javascript jquery css

Answer 1

Answer №1

Here is the solution you need:

Utilize the flex display property to organize the child elements in a column layout.
Adjust the opacity of the child elements to 0, ensuring they remain within the parent div and setting the parent's height equal to the tallest child element.
Create a new CSS class called visible to style the visible child element. The default hidden children should have a width of 0px, while the visible child will expand to 100% width.

function show(element) {
  $('.parent div').removeClass('visible');
  $('.' + element).addClass('visible');
}

.parent {
  border: 1px dashed #000;
  display: flex;
}

.child1 {
  height: 60px;
  background: red;
}

.child2 {
  height: 80px;
  background: yellow;
}

.child3 {
  height: 100px;
  background: orange;
}

.parent div {
  opacity: 0;
  width: 0px;
}

.parent div.visible {
  opacity: 1;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child1 visible">I'm 60px tall and visible; my parent is 100px tall</div>
  <div class="child2">I'm 80px tall and hidden until needed</div>
  <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

<br/>
<button onclick="show('child1')">Child 1</button>
<button onclick="show('child2')">Child 2</button>
<button onclick="show('child3')">Child 3</button>

Answer 2

Here is the solution you need:

Utilize the flex display property to organize the child elements in a column layout.
Adjust the opacity of the child elements to 0, ensuring they remain within the parent div and setting the parent's height equal to the tallest child element.
Create a new CSS class called visible to style the visible child element. The default hidden children should have a width of 0px, while the visible child will expand to 100% width.

function show(element) {
  $('.parent div').removeClass('visible');
  $('.' + element).addClass('visible');
}

.parent {
  border: 1px dashed #000;
  display: flex;
}

.child1 {
  height: 60px;
  background: red;
}

.child2 {
  height: 80px;
  background: yellow;
}

.child3 {
  height: 100px;
  background: orange;
}

.parent div {
  opacity: 0;
  width: 0px;
}

.parent div.visible {
  opacity: 1;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child1 visible">I'm 60px tall and visible; my parent is 100px tall</div>
  <div class="child2">I'm 80px tall and hidden until needed</div>
  <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

<br/>
<button onclick="show('child1')">Child 1</button>
<button onclick="show('child2')">Child 2</button>
<button onclick="show('child3')">Child 3</button>

Answer 3

Answer №2

How to conceal elements using the opacity property by setting it to 0 for hidden and 1 for visible, while ensuring that the parent container adjusts its height based on the tallest child.

Refer to the code snippet below for implementation:

$(function(){ 
  $(".c").fadeTo(0,0);
  $(".child1").fadeTo(0,1).addClass("visible");
  $(".btn").click(function(){
    $(".c").fadeTo(0,0);
    $(".visible").removeClass("visible").next().fadeTo(0,1).addClass("visible");
  });
});

.parent { position:relative; border:2px solid red; display:flex  }
.c { border:2px solid blue; }
.child1 { height:60px; }
.child2 { height:80px; }
.child3 { height:100px; }

<div class="parent">
    <div class="c child1">I'm 60px tall and visible; my parent is 100px tall</div>
    <div class="c child2">I'm 80px tall and hidden until needed</div>
    <div class="c child3">I'm 100px tall and hidden until needed</div>
</div>

<button class="btn">Show Next Child</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

How to conceal elements using the opacity property by setting it to 0 for hidden and 1 for visible, while ensuring that the parent container adjusts its height based on the tallest child.

Refer to the code snippet below for implementation:

$(function(){ 
  $(".c").fadeTo(0,0);
  $(".child1").fadeTo(0,1).addClass("visible");
  $(".btn").click(function(){
    $(".c").fadeTo(0,0);
    $(".visible").removeClass("visible").next().fadeTo(0,1).addClass("visible");
  });
});

.parent { position:relative; border:2px solid red; display:flex  }
.c { border:2px solid blue; }
.child1 { height:60px; }
.child2 { height:80px; }
.child3 { height:100px; }

<div class="parent">
    <div class="c child1">I'm 60px tall and visible; my parent is 100px tall</div>
    <div class="c child2">I'm 80px tall and hidden until needed</div>
    <div class="c child3">I'm 100px tall and hidden until needed</div>
</div>

<button class="btn">Show Next Child</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Creating a Parent Container to Maintain the Height of the Tallest Offspring

Answer №1

Answer №2

Similar questions

Encountering an error while trying to execute `$(document).ready(function() {}

What could be causing my iframe to not adjust its size according to its content?

Run the setInterval function immediately on the first iteration without any delay

Tips for refreshing information in the Angular front-end Grid system?

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

Creating methods in Vue that can alter elements created during the mounted lifecycle hook can be achieved by defining functions

Enhance Your Images: Creating Stunning Colored Overlay Effects using HTML and CSS

Guide to authenticating Cashfree gateway's webhook signature using JavaScript

Click to Rotate the Shape

Is there a way to utilize and incorporate Functions from a separate file within an API Server file?

Tips on customizing styles for Material UI components using CSS override techniques

Sending a variable to a function in JavaScript (winJs) from a different function

Steps to locate the incorrect text field after a validation error occurs

What is the best way to track and display the window.scrollY value in the console using Next.js

Having difficulty sending data to a controller through AJAX in Code Igniter. Can anyone help troubleshoot

Tips for preventing real-time changes to list items using the onchange method

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

Margin ambiguity in a vue.js application

The Google Books API has reached its limit for requests

Utilizing Visual Studio: Implementing jsmin in post-build actions