Hiding half of a content

Question

Hiding half of a content

Navigation

#1 by (5 votes)
#2 by (3 votes)

4

How do I do what is illustrated in the image? Knowing that content is not just text but buttons and other things on the home page of a site!

javascript html css

asked by anonymous 27.12.2016 / 14:55

2 answers

5

link

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

First we should know the structure of HTML, we will use div with class expand to create more than 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 hidden content. .expander is the dynamically generated element to click and show / hide content.

height is the size of the element when hiding content.

overflow: hidden causes the element to have a scrollbar but is hidden. Without it all the content would be visible.

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

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 createExpander function 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

27.12.2016 / 16:40

How to put 2 select in mysql Function Optimization (probably with for loop)

score 3 · Accepted Answer

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

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