Sandeep Ranjan Sandeep Ranjan - 5 months ago 84
CSS Question

CSS-grid, JS-mouse onClick event

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

<div class="container>
<div class="faces"></div>
<div class="faces"></div>
<div class="faces"></div>
.
.
.
.
.
</div>


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 Source

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;
  }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download