Exp Simples

by Felype Rennan

HTML

<div class="container-expansivel">
    <div class="conteudo">
        <h1>Aqui vem conteudo</h1>
        <p>É isso mesmo, aqui teoricamente deveria vir algum conteudo!</p>
        <p>Algo que faça sentido de ser expandido, algo que voce sabe bem o que vai ser!</p>
        <p>Uma campanha ou um formulario!</p>
        <p>Um nome! <input /></p>
        <p>Um Telefone! <input /></p>
        <p>Um Sei la! <input /></p>
        <p>E é isso aí!</p>
    </div>
    <button class="bt-expandir"></button>
</div>

SCSS

/*
    Exp Simples
    Felype Rennan
    O codigo nessa janela é SASS. http://www.sass-lang.com
    > gem install sass
    -----------------------------------------------
*/

/* Configurações do exemplo */
body {
    font-family: Roboto, "Segoe-UI", Tahoma, Verdana;
}
h1 {
    margin: 0;
    font-weight: 500;
}

/* estilo do controle em si */
.container-expansivel {
    margin: 0; padding: 0;
    box-sizing: border-box;
    background: black;
    color: white;
    > .conteudo {
        max-height: 0;
        overflow: hidden;
        margin: 0; padding: 0;
        padding: 0 12px;
        transition: 400ms ease-in-out;
    }
    
    > .bt-expandir {
        transition: 400ms ease-in-out;
        width: 100%;
        height: 40px;
        outline: none;
        border: 0 solid transparent;
        margin: 0;
        position: relative;
        background-color: rgba(15,15,15,0.3);
        cursor: pointer;
        &:before {
            content: " ";
            height: 40px;
            left: 40%;
            right: 40%;
            top: 0;
            position: absolute;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(http://bellshoals.com/wp-content/uploads/down-arrow-1.png);
            transition: 400ms ease-in-out 300ms;
        }
    }
    &:before {
      content: 'Clique para expandir';
      position: absolute;
      top: 16px;
      left: 22px;
      opacity: 0.6;
      transition: 200ms ease-out;
    }
    &.abrir {
        &:before {
          opacity: 0;
        }
        border: 2px solid #0082C8;
        border-radius: 4px;
        > .conteudo {
            max-height: 80vh;
            padding: 12px;
            overflow: auto;
        }
        > .bt-expandir {
            &:before {
                transform: rotateZ(-180deg);
            }
        }
    }
}

JavaScript

/*
    Exp Simples
    Felype Rennan
    O codigo nessa janela é JavaScript + jQuery. http://www.jQuery.com
    -----------------------------------------------
*/

$(".container-expansivel > .bt-expandir").click(function(e) {
    e.preventDefault();
    var $eu = $(this).parent();
    $eu.parent().children(".container-expansivel").each(function(e) {
        if($(this)[0] !== $eu[0]) {
            $(this).removeClass("abrir");
        }
    });
    $(this).parent().toggleClass("abrir");
});