DIV resize after being clicked

Question

DIV resize after being clicked

Navigation

#1 by (1 votes)

1

Hello! I have a page with several DIVs. which are several different news.
these DIV so in a size of 300px by 250px,
I would like to know how I can by clicking on any of these div it resizes on the screen and gets bigger, making it appear all the content that is inside it

html html5 css css3 div

asked by anonymous 01.12.2018 / 22:18

1 answer

Date field only gets the previous date selected Something wrong with if in the controller Laravel

score 1 · Answer 1

See if the code below helps you.

He is not using jQuery , > bootstrap what tools worth while you take a look

function onClick(){
    var self=this, // ; elemento clicada
        isOpen = self.classList.contains('open');

    Array.from(document.getElementsByClassName('noticia'))
  	    .forEach(function(el,idx){
            if( isOpen )
            {
                el.className='noticia'; // ; mostra a list noticia
            }
            else if( self != el )
            {
        	    el.className += ' close'; // ; esconde a lista
            }
            else
            {
        	    el.className += ' open'; // ; espande a noticia clicada
            }
  	    });
    }

/// Adicionar evento de onClick no elementos com a class noticia
Array.from(document.getElementsByClassName('noticia')).forEach(function(el,idx){
    el.onclick = onClick;
});

.noticias-container{
    text-align:center;
}
.noticias-container .noticia{
    display: inline-block;
    border:1px solid red;
    width: calc( 32.222% - 5px ); /* Coloquei tamanho flexivel para exibir aqui */
    margin: 3px 3px;
    height: 250px;
}
.noticias-container .noticia.close{
    display:none;
}

.noticias-container .noticia.open{
    width: 600px;
    height: 550px;
}

<div class='noticias-container'>
  <div class='noticia'>ELEMENTO 1</div>
  <div class='noticia'>ELEMENTO 2</div>
  <div class='noticia'>ELEMENTO 3</div>
  <div class='noticia'>ELEMENTO 4</div>
  <div class='noticia'>ELEMENTO 5</div>
  <div class='noticia'>ELEMENTO 6</div>
</div>