How to use .not() to hide all divs except the one which was clicked

Question

I'm trying to enlarge a set of images which have thumbnails inside divs.

When I click the .thumbnail class, which is applied to the images, the image enlarges but I would like all the other products to disappear.

I tried adding a class with display: none but because the image being passed to the function is inside the div it's still not being shown (I think that's why) so I've tried using opacity but without success. I will add the relevant code below.

Any help would be greatly appreciated, thank you.

 $(document).ready(function() { var images = document.querySelectorAll('.thumbnail'); images.forEach(function(image) { image.addEventListener('click', enlarge); }); function enlarge(e) { var image = e.target, interval, height = 200, width = 200, z = $(this).css("z-index"); //Obtain the current z-index of the image which has been clicked /*thisProduct = */ $(this).css("z-index", z + 10); //increase the z-index of just the image which has been selected by 10 $('#product-container').addClass('disable-click'); //Stops other products from being enlarged whilst another is $('.unhidden').not($(this)).addClass('noOpacity'); } }); 

 .noOpacity { opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="product-container"> <div class="product-wrapper"> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/home-bg.jpg" class="thumbnail"> </div> <div class="product-text"> Mexican Nachos - £6.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/enchilada.jpg" class="thumbnail"> </div> <div class="product-text"> Enchiladas - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/quesadilla.jpg" class="thumbnail"> </div> <div class="product-text"> Quesadilla - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/shrimp.jpg" class="thumbnail"> </div> <div class="product-text"> Shrimp Stir Fry - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/tacos.jpg" class="thumbnail"> </div> <div class="product-text"> Tacos - £5.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/tortilla.jpg" class="thumbnail"> </div> <div class="product-text"> Tortillas - £7.99 </div> </div> </div> </div> <!-- Product container --> 

Answer 1

You have attached event handlers with .thumbnail elements not with .unhidden , So you need target parent element using .closest() / .parents() then not() can be used. So use

$('.unhidden').not($(this).closest('.unhidden')).addClass('noOpacity');

instead of

$('.unhidden').not($(this)).addClass('noOpacity');

 $(document).ready(function() { var images = document.querySelectorAll('.thumbnail'); images.forEach(function(image) { image.addEventListener('click', enlarge); }); function enlarge(e) { var image = e.target, interval, height = 200, width = 200, z = $(this).css("z-index"); //Obtain the current z-index of the image which has been clicked /*thisProduct = */ $(this).css("z-index", z + 10); //increase the z-index of just the image which has been selected by 10 $('#product-container').addClass('disable-click'); //Stops other products from being enlarged whilst another is $('.unhidden').not($(this).closest('.unhidden')).addClass('noOpacity'); } }); 

 .noOpacity { opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="product-container"> <div class="product-wrapper"> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/home-bg.jpg" class="thumbnail"> </div> <div class="product-text"> Mexican Nachos - £6.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/enchilada.jpg" class="thumbnail"> </div> <div class="product-text"> Enchiladas - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/quesadilla.jpg" class="thumbnail"> </div> <div class="product-text"> Quesadilla - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/shrimp.jpg" class="thumbnail"> </div> <div class="product-text"> Shrimp Stir Fry - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/tacos.jpg" class="thumbnail"> </div> <div class="product-text"> Tacos - £5.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/tortilla.jpg" class="thumbnail"> </div> <div class="product-text"> Tortillas - £7.99 </div> </div> </div> </div> <!-- Product container --> 

Answer 2

Why do you mix jQuery with pure js? Let's do it with only jQuery .

 $(document).ready(function() { $('.thumbnail').click(function(e) { var image = e.target, interval, height = 200, width = 200, z = $(this).css("z-index"); $(this).css("z-index", z + 10); $('#product-container').addClass('disable-click'); $('.unhidden').not($(this).parent().parent()).addClass('noOpacity'); }); }); 

 .unhidden {} .noOpacity { opacity: 0; transition: .5s ease all; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="product-container"> <div class="product-wrapper"> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/home-bg.jpg" class="thumbnail"> </div> <div class="product-text"> Mexican Nachos - £6.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/enchilada.jpg" class="thumbnail"> </div> <div class="product-text"> Enchiladas - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/quesadilla.jpg" class="thumbnail"> </div> <div class="product-text"> Quesadilla - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/shrimp.jpg" class="thumbnail"> </div> <div class="product-text"> Shrimp Stir Fry - £10.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/tacos.jpg" class="thumbnail"> </div> <div class="product-text"> Tacos - £5.99 </div> </div> <div id="product" class="unhidden"> <div class="image-container"> <img src="assets/tortilla.jpg" class="thumbnail"> </div> <div class="product-text"> Tortillas - £7.99 </div> </div> </div> </div> <!-- Product container --> 

Answer 3

Try doing this:

$('.thumbnail').on('click', function(){
    $('.image-container').not(this).closest('.image-container').hide();
})

On clicking any thumbnail class, all thumbnail classes ( except for 'this') will get hidden.

Answer 4

Use classes and IDs to construct your functionality. For example:

<div class='thumbnail'>A</div>
<div class='thumbnail'>B</div>
<div class='thumbnail' id='1'>C</div>

Try this function:

function showOne(id) {
    $('.thumbnail').not('#' + id).hide();
}

showOne(1);​

Hope it helps.

Answer 5

when you are using .not($(this)) the this you are referencing is the imagine not the div with '.unihdden' on it. try this:

$(document).ready(function () {
    var images = document.querySelectorAll('.thumbnail');


    images.forEach(function(image) {
        image.addEventListener('click', enlarge);
    });
  });
function enlarge(e) {
    var image = e.target,
        interval,
        height = 200,
        width = 200,
        z = $(this).css("z-index"); //Obtain the current z-index of the image which has been clicked
        /*thisProduct = */

    $(this).css("z-index", z + 10);  //increase the z-index of just the image which has been selected by 10
    $('#product-container').addClass('disable-click'); //Stops other products from being enlarged whilst another is
    $('.unhidden').not($(this).closest('.unhidden')).addClass('noOpacity');
    /*$('.unhidden').addClass("hide");*/

}