Adjusting the parent with CSS transitions to perfectly align with the final height of a

Question

Adjusting the parent with CSS transitions to perfectly align with the final height of a

Jade example

div.parent
    div.child1
    div.child2

Upon initial load, Child1 is visible. Clicking will hide Child1 and make Child2 visible. Another click will reverse this action.

During the transition between hiding and showing the children, there should be a smooth height change from 100% to 0% and vice versa. The parent element should also adjust its height accordingly to match the newly visible child.

Visually, Child1 will appear to roll up while Child2 rolls down, and the parent element will extend or contract based on the final size after transition.

The question then arises: Is it possible to achieve this effect using CSS transitions alone?

html css css-transitions css-animations

Answer 1

Answer №1

Only if the final height of the children is known beforehand, can it be achieved.

var button = document.querySelector('button');
var parent = document.querySelector('.parent');

button.onclick = function(){
  parent.classList.toggle('toggle');
}

.child1,
.child2 {
  height: 100px;
  background: #faa;
  overflow: hidden;
  transition: all .3s;
}

.child2 {
  background: #aff;
  height: 0;
}

.toggle .child1 {
  height: 0;
}

.toggle .child2 {
  height: 100px;
}

<div class="parent">
  <div class="child1">Something here</div>
  <div class="child2">Or here</div>
</div>
<button>Click me</button>

Alternatively, even without knowing the final height, it can still be accomplished, but using this method in pure CSS could be seen as overly complicated and not worth implementing. It involves adding a transition and setting a max-height significantly larger than the actual height, which can cause delays during collapsing due to % calculations based on the difference between X and the height.

In an interesting twist (just for fun), you could also achieve this without JavaScript, although I wouldn't recommend it since it's less clear (typically JS handles these interactions):

.child1,
.child2 {
  height: 100px;
  background: #faa;
  overflow: hidden;
  transition: all .3s;
  cursor: pointer;
}

.child2 {
  background: #aff;
  height: 0;
}

.toggle {
  display: none;
}

:checked ~ .child1 {
  height: 0;
}

:checked ~ .child2 {
  height: 100px;
}

<label>
  <input class="toggle" type="checkbox" name="el" />
  <div class="child1">Click me</div>
  <div class="child2">Now me</div>
</label>

Answer 2

Only if the final height of the children is known beforehand, can it be achieved.

var button = document.querySelector('button');
var parent = document.querySelector('.parent');

button.onclick = function(){
  parent.classList.toggle('toggle');
}

.child1,
.child2 {
  height: 100px;
  background: #faa;
  overflow: hidden;
  transition: all .3s;
}

.child2 {
  background: #aff;
  height: 0;
}

.toggle .child1 {
  height: 0;
}

.toggle .child2 {
  height: 100px;
}

<div class="parent">
  <div class="child1">Something here</div>
  <div class="child2">Or here</div>
</div>
<button>Click me</button>

Alternatively, even without knowing the final height, it can still be accomplished, but using this method in pure CSS could be seen as overly complicated and not worth implementing. It involves adding a transition and setting a max-height significantly larger than the actual height, which can cause delays during collapsing due to % calculations based on the difference between X and the height.

In an interesting twist (just for fun), you could also achieve this without JavaScript, although I wouldn't recommend it since it's less clear (typically JS handles these interactions):

.child1,
.child2 {
  height: 100px;
  background: #faa;
  overflow: hidden;
  transition: all .3s;
  cursor: pointer;
}

.child2 {
  background: #aff;
  height: 0;
}

.toggle {
  display: none;
}

:checked ~ .child1 {
  height: 0;
}

:checked ~ .child2 {
  height: 100px;
}

<label>
  <input class="toggle" type="checkbox" name="el" />
  <div class="child1">Click me</div>
  <div class="child2">Now me</div>
</label>

Adjusting the parent with CSS transitions to perfectly align with the final height of a

Answer №1

Similar questions

Instructions for changing the background color continuously

Tips on utilizing HTML tags in shiny context to highlight or potentially enlarge the font size for sprintf使

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

Implementing an interactive tab feature using jQuery UI

Generating custom-styled entries using Word VBA

Encountered a problem while attempting to create two separate div elements. The template root is designed to have only one element. This issue

Wrapping a series of grids within a parent container to manage height effectively with grid960

Activating the CSS :active selector for elements other than anchor tags

Why is there a thin line still visible on the other sides when a transparent background is used, but only on mobile devices, with a curved border on one side?

Disregard the significance of radio buttons - iCheck

PDFMAKE: A Guide to Duplicating Elements in the 'Content' Array

"Enhance Your Website with Creative Image Hover Effects using HTML

What could be causing this jQuery to malfunction?

Pictures change positions in online email interfaces like gmail

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Navigating Liferay Portlet in reverse order

Encountering issues with the hyperlink tag '<a>' in an HTML document

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

What is the best way to ensure that a header with SVG graphics is SEO-friendly and accessible to screen readers?

Postback does not show updates made by JQuery