Selecting only the current click (div) item in javascript

Question

I am trying to implement, grid system, where if I click on one of the divs, it zooms in while the other divs fades out.

How do I select both these elements separately so that

Current click div zooms in
Rest of the elements fades out

var slider= $('.image_slide');

slider.on('click', function(){

    slider.css('opacity', 0);

});

.slider_images{
  height:200px;
  width:200px;
}

.image_slide{
  padding:40px;
  display:block;
  background-color:#555; 
  width: 40%;
  margin-top:20px;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider_images>
           <a href= "#" class="image_slide">IMAGE 1 </a>
           <a href= "#" class="image_slide">IMAGE 2 </a>
           <a href= "#" class="image_slide">IMAGE 3 </a>
           <a href= "#" class="image_slide">IMAGE 4 </a>
        </div>

Here by clicking one of the divs, I would like the clicked div to zoom in while others disappear. How can Javascript and Jquery capture the current click event while selecting other elements to do another interaction?

Thanks

Can you post the code that you've tried so we can troubleshoot? — Stephen C, Apr 25 '17 at 18:59
Possible duplicate of [How do I animate a scale css property using jquery?](http://stackoverflow.com/questions/35429935/how-do-i-animate-a-scale-css-property-using-jquery) — MaxZoom, Apr 25 '17 at 19:09

Vololodymyr · Answer 1 · 2017-04-25T19:45:59.413

You can implement it using css and a little bit of js code without any jQuery. But you can adapt this code using jQuery features.

document.querySelectorAll(".item").forEach((element, n, all) => {
    element.addEventListener("click", () => {
        all.forEach(item => item.classList.remove("selected"))
        element.classList.add("selected");
    });
});

.container{
  border: 2px solid black;
  display: inline-block;
  position: relative;
}

.item {
  display: inline-block;
  background: red;
  width: 80px;
  height: 80px;
  margin: 20px;
  transition: 1s;
  color: white;
  padding: 10px;
  opacity: 0.5;
}

.item.selected {
  transform: scale(1.3);
  opacity: 1;
  box-shadow: 0 0 10px black;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Please note that querySelectorAll, pointer-events, classList may not be supported on old browsers, but you can fix it using older js approaches.

Thanks for the response, but here, could you please make the interaction in such a way that, once I click on one of these divs, it scales up while others fade away. — jeff, Apr 25 '17 at 19:35

score 0 · Answer 2 · answered Apr 25 '17 at 19:38

You can add a click event to all the div and in the click event you select all of them and let them fade out. To get the one that got clicked to zoom in you can select it with this and just revert the fade out and do your zoom in.

document.getElementsByTag("div").addEventListener("click", function() {
    var divs = document.getElementsByTag("div"); //This are all your divs
    divs.foreach(function() {
       this.classList.remove("zoom-in"); //Could be that a element is already zoomed in what have to be reseted first
       this.classList.add("fades-out"); //Or However you do your fade out
    }
    this.classList.remove("fade-out");
    this.classList.add("zoom-in"); //Add your zoom effect
)};

I assume that you are doing your animations with css in this example.

Selecting only the current click (div) item in javascript

2 Answers2