DIV resize after being clicked

Asked

Viewed 100 times

1

hello
I have a page with several DIV. that are different News.
these divs are at a size of 300px by 250px,
would like to know how do i click on any of these div she redeem
on screen and get bigger ,causing all the content inside it to appear
inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

html css html5 css3 div

  • But the augmented div will be on top of the others, will push the others, as it is?

  • Good tb put the HTML of what you have already done because depending on how you are doing to influence the result.

  • @Sam actually when this DIV opens won’t show the others.

  • Put the code to the question.

  • So you want to click open a popup with the news? Type click on the div and open a "window" above the page showing only the news clicked?

  • Modal Boostrap would look good in your case

  • @hugocsl and that

Show 2 more comments

1 answer

1

See if the code below helps you.

He’s not using it jQuery, bootstrap what tools are worth just 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>

Browser other questions tagged html css html5 css3 div

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