Getting following content to collapse when using transform to hide content

Question

I have a situation where I have for example little boxes which follow each other one after each other and I want users to be able to toggle the show/hide of these elements, I have got them working like I want, but when the respective box is collapsed/hidden the content below it doesn't collapse upwards as well.

I understand why this is however, it's because using transform it still allocates the space for the element that you transformed out of it's original position; however I couldn't work out another way to do it in the same fashion as using a negative margin-top for some reason didn't animate smoothly like transform does.

CodePen: http://codepen.io/gutterboy/pen/GqRoJY

CodePen (margin-top version): http://codepen.io/gutterboy/pen/WxNGVG

HTML:

<div class="foo">
    <header>
        Header
        <a href="#" class="toggle" data-content-id="1">Toggle</a>
    </header>
    <div class="content-wrap">
        <div id="content-1" class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
            Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
        </div>
    </div>
</div>
<div class="foo">
    <header>
        Header
        <a href="#" class="toggle" data-content-id="2">Toggle</a>
    </header>
    <div class="content-wrap">
        <div id="content-2" class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
            Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
        </div>
    </div>
</div>
<div class="foo">
    <header>
        Header
        <a href="#" class="toggle" data-content-id="3">Toggle</a>
    </header>
    <div class="content-wrap">
        <div id="content-3" class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
            Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
        </div>
    </div>
</div>

CSS (SCSS):

.foo {
    margin: 10px;
    width: 400px;

    header {
        padding: 10px;
        border: 1px solid #000;
        border-bottom: 2px solid #000;
    }

    .content-wrap {
        overflow-y: hidden;
        transform-style: preserve-3d;
    }

    .content {
        padding: 10px;
        background-color: gray;
        transform: translateY(0);
        border: 1px solid #000;
        border-top: none;
        transition: 1s;

        &.closed {
            transform: translateY(-100%);
        }

    }

}

JS (jQuery):

$(document).ready(function() {

    $('.toggle').on('click', function(e) {

        e.preventDefault();

        var content_id = $(this).data('content-id');

        $('#content-' + content_id).toggleClass('closed');

    });

});

Is there anyway to get the boxes below to collapse smoothly at the same time the proceeding box does?

Also note that the boxes are variable height and hence we can't use height, want to avoid hacky solutions like using a really high max-height and preferably avoid using any JS for the animation.

Answer 1

Your problem, delay at starting due to margin : -100% and the div is still not visible at margin : -40%

and

CSS transition do not animate when you add or remove class, It will only animate when you change the CSS properties. And You are directly adding and removing classes.

Here is another way to get this by jQuery :

$('.toggle').on('click', function(e) {
  var content_id = $(this).data('content-id');
  $('#content-' + content_id).slideToggle('slow');
});

Updated Codepen