I've been Googling potential solutions but as yet cannot find one that fits the brief.
<div class="parent">
<div class="child1">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>
I'll use jQuery to change the css of the visible child but I'd prefer a CSS solution to the height if possible.
No IE8/9/10 to support.
Anyone got ideas?
Hope this is what you want:
flex display to arrange the child as column display.opacity as 0 so that the child element still remain in the parent div, this will set the parent height the same as the tallest child.visible to style the visible child, and set default children (which are hidden) width: 0px while visible child will have width: 100%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>hide using opacity with 0 and 1 and the parent should be as tall as the tallest child.
See snippet below
$(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>