CSS-grid, JS-mouse onClick event

Question

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?

The first thing to do in your click event is to reset the CSS properties of all 'faces', and then only to change the CSS of the item clicked. So you're almost there, just add the reset: `$('.faces').css();`. — KIKO Software, Dec 22 '17 at 23:13

score 3 · Answer 1 · answered Dec 22 '17 at 23:11

I made an example for you (just click on the red boxes):

var lastClickedFace = null;

$(".faces").click(function(e) {
 if (lastClickedFace) {
  $(lastClickedFace).css("background-color", "red");
 }
  
 $(this).css("background-color", "green");
  
 lastClickedFace = this;
});

.faces {
  width: 20px;
  height: 20px;
  background-color: red;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
  <div class="faces"></div>
</div>

The key is, to save the "last clicked face". In this case we just assign it to a variable called "lastClickedFace".

The next time your click on any face, we check if this variable is NOT null (which means we had a "last clicked face").

score 1 · Accepted Answer · answered Dec 22 '17 at 23:17

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;
  }

CSS-grid, JS-mouse onClick event

2 Answers2