COLAPSED

by olimann

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<section class="collaps-info">

    <a class="btn"><i class="fi-info"></i></a>
   
        <div id="outer" class="collapsable collapsed">
            
            <div id='inner-info' class="row">
                <div class="medium-8 medium-centered columns">
                <h3>Client</h3>
                <p>lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit</p>
                <h3>Support</h3>
                <p>lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit</p>
                </div>
            </div>

            
        <div>
</section>        

    
    
    
    
<div id="content" class="row">
<div class="large-6 columns">
<h3>Titre</h3>
<p>lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit</p>
</div>
    
<div class="large-6 columns">
<h3>Titre</h3>
<p>lorem...

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100);

body{
    font-family: "Roboto Slab",Arial,sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #26272d;
    padding: 20px;
}


h1, h2, h3, h4, h5 {
    font-family: "Montserrat",Arial,sans-serif;
    font-weight: 400;
    
   
}

a.btn{
    font-size: 4em;
    color: #26272d;
    display: inline-block;    
}

a.btn:hover i{
    color: red;    
}

a.btn.action i{
    color: red;    
}

section.collaps-info{
    margin-bottom: 30px;
    text-align: center;
    
}

.collapsable {
   -webkit-transition: all .4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -moz-transition: all .4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -o-transition: all .4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
   transition: all .4s cubic-bezier(0.165, 0.840, 0.440, 1.000);

    overflow: hidden;
    background: #26272d;
    color: #fff;
    text-align: left;
}
.collapsed {
    max-height:0px;
}

#inner-info{
    padding: 60px 0;
    text-align: left;
}
#inner-info h3{
    color: #fff;
}

JavaScript

$('.btn').bind('click', function(e) { 
    e.preventDefault();
    
    	var w = $('#outer');
    var f = $('.btn');
    
    if (w.hasClass('collapsed')) {        
        f.addClass('action');
        w.css({ "max-height": $('#inner-info').outerHeight() + 'px' });      

    } else {
        w.css({ "max-height": "0px" });
        f.removeClass('action');
    }       
        
    w.toggleClass('collapsed');
    

    
    });
    
    

    



//$('.btn').bind('click', function(e) { 
//    e.preventDefault();
    
//    var w = $('#outer');
//    var f = $('.btn');
    
//    if (w.hasClass('collapsed')) {
//        w.css({ "max-height": $('#inner-info').outerHeight() + 'px' });
//        f.addClass('action');

//    } else {
//        w.css({ "max-height": "0px" });
//        f.removeClass('action');
//    }
//    w.toggleClass('collapsed');
//});