6

Como faço para fazer isso que esta ilustrado na imagem? Sabendo que o conteúdo não é apenas texto e sim botoes e outras coisas da pagina inicial de um site!

inserir a descrição da imagem aqui

3
  • 3
    Basicamente a solução é colocar o div como overflow:hidden, mas para saber como calcular os 50% depende de você colocar a estrutura do código. Uma solução menos nobre é usar um pseudoelemento com posição absoluta e 50% de altura, tampando o conteúdo, mas aí a div externa vai ocupar o mesmo espaço que o 100% de altura. Clique em editar e ponha a estrutura do HTML para quem for responder possa avaliar melhor a solução mais adequada.
    – Largato
    27/12/2016 às 14:07
  • Como @Bacco disse é necessário ter uma base para ajudar. Coloque o que já tentou e o codigo como ficou para uma ajuda mais detalhada. Pretende mesmo em javascript? Pode ser em jquery? 27/12/2016 às 14:10
  • Já deu pra entender + ou -, mas ainda não fiz nada só queria saber como faz isso por que vou precisar
    – MarsS
    27/12/2016 às 15:10

2 Respostas 2

5

Pode-se fazer isso com css mesmo, um exemplo é usar formatação normal com overflow:hidden para a horizontal e uma flex-box para fazer isso na vertical, exemplo...

.container{
  border: 1px black solid;
  width: 250px;
  overflow: hidden;
}
.container > input{
  width: 250px;
  margin-left: 125px;
}

.container2{
  display: flex;
  border: 1px black solid;
  width: 40%;
  overflow: hidden;
  height: 150px;
}
.container2 > input{
  width: 100%;
  margin-top: -60px;
  height: 150px;
}
<h4>Horizontal</h4>
<div class="container">
   <input type="submit">
</div>
<h4>Vertical</h4>
<div class="container2">
   <input type="submit">
</div>

5

https://jsfiddle.net/d8gz67nt/1/

Vou deixar um exemplo para que sirva de base para você ter uma noção. No final deixei alguns links.

Primeiro devemos saber a estrutura do HTML, usaremos uma div com a classe expand para podermos criar mais de um conteúdo expansível.

<body>
    <div class="expand"></div>
</body>

Agora precisamos ajustar os estilos.

.expand {
    position: relative;
    width: 400px;
    min-height: 200px;
    height: 200px;
    background: #ccc;
    overflow: hidden;
    padding-bottom: 18px;
}

.expander {
    position: absolute;
    background: #aaa;
    bottom: 0;
    width: 100%;
    height: 18px;
    text-align: center;
    cursor: row-resize;
}

.expand são os blocos que terão conteúdos ocultáveis. .expander é o elemento gerado dinamicamente para clicar e mostrar/ocultar o conteúdo.

height é o tamanho do elemento quando estiver ocultando conteúdo.

overflow: hidden faz com que o elemento tenha uma barra de rolagem, porém oculta. Sem ela todo o conteúdo seria visível.


Agora precisamos criar os eventos em javascript para permitir que o conteúdo seja mostrado.

function createExpander (container) {
    var elem;

    elem = document.createElement('div');
    elem.className = 'expander show';
    elem.innerHTML = 'Mostrar';

    elem.addEventListener('click', function () {
        // se o conteúdo estiver ocultado, altera o height
        // para que se adapte ao tamanho do conteúdo.
        // Se não, apenas retorna ao tamanho original (200px).
        if (elem.className === 'expander show') {
            elem.innerHTML = 'Ocultar';
            elem.className = 'expander hide';

            container.style.height = 'auto';
        } else {
            elem.innerHTML = 'Mostrar';
            elem.className = 'expander show';

            container.style.height = '200px';
        }
    });

    container.appendChild(elem);
}

document.addEventListener('DOMContentLoaded', function () {

    // aplicamos em todos os elementos .expand na página.
    document.querySelectorAll('.expand').forEach(function (elem) {
        createExpander(elem);
    });
});

A função createExpander gera o elemento clicável que mostra/oculta o conteúdo.


Aqui tem alguns links para entender melhor algumas partes.

O atributo Overflow de CSS

Overflow - CSS | MDN

Manipulando css com javascript

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .