accordeon foundation5

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">
<h1>Titre de la page</h1>


<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>Gautier est un fabricant de meubles contemporains et design pour les professionnels et particuliers, situé à Saint-Herblain. Gautier Office se spécialise dans la fabrication de bureaux et accessoires de bureaux à destination des entreprises et des particuliers.</p>     
                     
                <h3>Comptétence</h3>
                <p>Conception (direction artistique) & Créations (web) au sein de l'agence Nouvelles Conquêtes </p>
    
                <h3>Support</h3>                         
                <p>Création de la charte graphique du site internet responsive, adaptation des différents formats, création de la mise en page, du design, de l'ergonomie et choix des visuels.</p>
                
                <ul>
                <li><a>#link</a></li>
                <li><a>#link</a></li>
                <li><a>#link</a></li>
                <li><a>#link</a></li>
                <li><a>#link</a></li>
                <li><a>#link</a></li>
                </ul> 
                    
                    
                <p>Olimann - Graphiste - Illustrateur - Webdesigner - Freelance - Nantes.</p>
                    
                </div>      

                
        </div> 
            
    </div>
                     
</section>



<p>Thalassius</p>

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);

*{
   margin: 0;
   padding: 0;
}
body{
  background-color: #fff;
  font-size: 1.1em;
  text-align: center;
  font-family: "Roboto Slab",Arial,sans-serif;
  font-weight: 400;
  line-height: 1.5;
  padding: 20px;
    
}

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


.btn{
   cursor:pointer;
     transition: transform .5s ease;
    -moz-transition: -moz-transform .5s ease;
    -webkit-transition: -webkit-transform .5s ease;
    -o-transition: -o-transform .5s ease;
    padding: 10px;
    display: inline-block;
    font-size: 4rem;
    
}

.btn.action {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

section.collaps-info{
    margin-bottom: 30px;

}


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


.collapsable {   
    -webkit-transition: max-height .4s ease;
    -moz-transition: max-height .4s ease;
    transition: max-height .4s ease;
    background: #26272d;
    overflow: hidden;

}
.collapsed {
    max-height:0px;

}

/**/

h3 {
    color: #fff;
}

p {
    color: #808289;
}



.collaps-info ul {
    list-style-type:none;
    margin: 0;
    
}
.collaps-info ul li {
    display: inline-block;
    padding-right: 10px;
    color: #808289;
}

.collaps-info ul li::after {
    content: "/";
    margin-left: 10px;
}

p {
    
}

JavaScript

var isOpen = false;
var Bloc = $("#outer");
var btnBloc = $(".btn");

btnBloc.click(function () {
    if (isOpen == false) {
        openMenu();
    } else {
        if (isOpen == true) {
            closeMenu();

        }
    }
});


function openMenu() {
    isOpen = true;
    Bloc.hasClass('collapsed');
    Bloc.css({ "max-height": $('#inner-info').outerHeight() + 'px' });
    btnBloc.addClass('action');    
 
}

function closeMenu() {
    isOpen = false;
    Bloc.css({ "max-height": "0px" });    
    Bloc.toggleClass('collapsed');
    btnBloc.removeClass('action');
}


//resize Open
$(window).resize(function () {
    if (isOpen == true) {
        openMenu();
    }
});