I am currently working on developing a transition that can effectively 'collapse' a div along with its floating elements by adjusting the width, padding, and border properties.
After conducting some research, I have compiled my findings in the following link: http://jsfiddle.net/p38b6ndb/1
Here is a sample of how it looks:
HTML:
<div>
<div class="section">
<div class="sub-section">label</div>
<div class="sub-section">field</div>
</div>
<div class="section collapsible">
<div class="sub-section">label</div>
<div class="sub-section">field</div>
</div>
<div class="section">
<div class="sub-section">label</div>
<div class="sub-section">field</div>
</div>
</div>
CSS:
.section {
float: left;
width: 25%;
}
.section.collapsible {
opacity: 1;
transition: opacity linear 1s, width linear 1s;
}
.section.collapsible.collapsed {
width: 0;
opacity: 0;
}
.sub-section {
width: 50%;
float: left;
height: 42px;
}
The goal: The intention is for the second section to collapse while the third section moves to the left next to the first section.
The issue: The problem arises when there is padding and/or border on the collapsing div. As the width decreases during the collapse, the div wraps around causing an increase in height, subsequently pushing down other elements below it.
- I attempted using
box-sizing: border-box, but it did not provide the desired effect. - Transitioning the
paddingandborder-widthproperties alongside the width did not prevent wrapping either. Adjusting durations also did not yield the expected outcome. - Ignoring padding and border changes as they become opaque and simply adding a
margin-leftdid not address the height increase issue. - Although fixing the height is an option, ideally, the height should be flexible since each section may contain varying content sizes.
Can someone provide guidance on implementing this collapse transition for divs containing padded/bordered elements?
If possible, demonstrating a solution by updating the provided fiddle would be greatly appreciated.