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

Error in clientWidth measurement providing inaccurate width

Troubleshooting Problem With Foundation 5 Abide and Modal AJAX Integration

Unable to verify the provided resource: Mailchimp

It appears that the crackling noise is being generated by AudioContext.decodeAudioData

Unlimited highway CSS3 motion

A guide on efficiently traversing a disk directory, recursively fetching all paths in relative format, and converting them into a JSON stream with node.js

Implement jQuery pagination with AJAX in PHP

Use the lodash chunk method to split a mapped array into two separate arrays

WordPress display issue: AMCharts chart won't appear

What is the best way to add bold formatting to text enclosed in parentheses using javascript/jquery?

Is the mounted hook not being triggered in a Nuxt component when deploying in production (full static mode)?

HTML dropdown menu to trigger an action with the submitted URL

Tips on boosting CSS specificity in Material-UI's makeStyle for styled components in order to successfully override the root style

Creating a captivating animation for a social media like button with CSS

What are the steps to transform an object containing arrays into strings and then embed them into my HTML code?

Executing an Amplifyjs GET request containing a request body

Is it possible to combine Bootstrap 2.3.1 with newer versions such as 4.0 or 3.x.x?

Enhance the jQueryUI progress bar by dynamically updating it with inner HTML data

angular8StylePreprocessorSettings

The functionality of Croppie is currently not functioning within a jQuery Fancybox popup modal