Grouped block exploration

by levchenko_d

HTML

<div class="wrap">
    <div class="cont">
        <h2 class="_toggle">Some Header<button>Click</button></h2>
        <p>Some text<br>Some text<br>Some text<br>Some text<br>Some text</p>
    </div>
    <span class="close _toggle"></span>
</div>

CSS

*{
    -webkit-box-sizing:border-box;
}

body{
    font-family: sans-serif;
}

.wrap{
    width: 500px;
    margin: 50px auto;
}

.cont{
    height: 40px;
    overflow: hidden;
    border: solid 1px #e2e2e2;
    -webkit-transition: 0.3s ease;
    background: #e2e2e2;
    position: relative;
    z-index: 2;
    border-radius: 5px;
}

.__open .cont{
    background: #fff;
}

._toggle{
    cursor: pointer;
}

.cont h2{
    border-bottom: solid 1px #e2e2e2;
}

.cont h2, .cont p{
    margin: 0;
    min-height: 40px;
    padding: 5px 10px;
}

.close{
    display: block;
    background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRMOzIQEsYvRxSKGbz_opRy6YfNtpgXCbO0Ct7wmXEuG8ClNw3TWO_LwwY');
    background-size: 100%;
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    -webkit-transition: 0.35s ease;
    -webkit-transform: rotate(-90deg);
    top: -40px;
    z-index: 1;
    opacity: 0.5;
}

.__open .close{
    top: 10px;
    -webkit-transform: rotate(0deg);
}

.close:hover{
    opacity: 1;
    -webkit-transition: 0.25s ease; 
}

.close:active{
    opacity: 0.5;
}

.cont h2 button{
    background: #3498db;
    border: none;
    border-radius: 5px;
    padding: 6px 10px;
    color: white;
    float: right;
    -webkit-transition: 0.25s ease; 
    margin-top: -100px;
}

.__open .cont h2 button{
    margin:0;
}

JavaScript

$('._toggle').click(function(){
    var ph = $('.wrap:not(.__open) .cont p').outerHeight() || 0;
    console.log('ph',ph)
    $('.wrap').toggleClass('__open');
    $('.wrap .cont').css('height',40+ph);
})