javascript - CSS-grid, JS-mouse onClick event

Sunday, February 17, 2019

javascript - CSS-grid, JS-mouse onClick event

In my HTML, I have one parent div and have 25 div's inside it.

I'm using CSS grids

.container {
    display: grid;
    grid-template-columns: repeat(5, auto);
    margin: 2% auto;
    width: 750px;
    grid-gap: 1px;
}


.container > div {
    overflow: hidden;
    height: 150px;
    border: 1px solid;
}

.faces img {
    height: 150px;
}

This gives me 5 div in each row.

Now when I click on any div I want it to expand

$('.faces').click(function() {
  $(this).css('grid-column','span 3');
  $(this).css('grid-row','span 2');
  $(this).css('height','auto');

}):

This JS does work. But i just want only the clicked element to have such css property.
When another div is clicked the previous should take back its position.

How do I do it?

Answer

You could first remove the style attribute from all faces and then set the css properties.

Try the following.

$('.faces').click(function() {
  $('.faces').removeAttr('style');
  $(this).css('grid-column','span 3');
  $(this).css('grid-row','span 2');
  $(this).css('height','auto');
}); //<-- In your solution is a colon instead of semicolon

Here you can read about removing the style attribute from an element.
https://stackoverflow.com/a/16462898/7111755

There is also a better solution. You can simply use removeClass and addClass in JQuery. So you could make one class with the properties for expanding the div.

$('.faces').click(function() {
  $('.faces').removeClass('expand');
  $(this).addClass('expand');

});

Define the expand class in css

  .expand{
     grid-column: span 3;
     grid-row: span 2;
     height: auto;
  }

Blog

Sunday, February 17, 2019