How to hide half a piece of content

Asked

Viewed 760 times

6

How do I do what is illustrated in the picture? Knowing that the content is not just text but buttons and other things from a website homepage!

inserir a descrição da imagem aqui

javascript html css
  • 3

    Basically the solution is to put the div as overflow:Hidden, but to know how to calculate the 50% depends on you put the code structure. A less noble solution is to use a pseudoelement with absolute position and 50% height, covering the content, but then the external div will occupy the same space as the 100% height. Click on [Edit] and put the HTML structure for the respondent can better evaluate the most appropriate solution.

  • As @Bacco said it is necessary to have a base to help. Put what you already tried and the code as it was for a more detailed help. Do you really want javascript? It can be jquery?

  • I could understand + or -, but I haven’t done anything yet I just wanted to know how you do it because I’m going to need

2 answers

5


One can do this with same css, an example is to use normal formatting with overflow:Hidden for horizontal and a flex-box to do this vertically, example...

.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/

I will leave an example to serve as a basis for you to have a notion. At the end I left some links.

First we must know the structure of HTML, we will use a div with class expand so that we can create more than one expandable content.

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

Now we need to adjust the styles.

.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 are the blocks that will have concealable content. .expander is the dynamically generated element for clicking and showing/hiding content.

height is the size of the element when hiding content.

overflow: hidden makes the element have a scroll bar, but hides it. Without it all content would be visible.

Now we need to create the events in javascript to allow content to be displayed.

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

The function createExpander generates the clickable element that shows/hides the content.

Here are some links to better understand some parts.

The CSS Overflow attribute

Overflow - CSS | MDN

Manipulating css with javascript

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.