Here is the original position.

when you click on each block - a hidden block is revealed - and all the adjacent color blocks turn gray. when pressed again, the color returns if, when one block is opened, to push another, the color should switch to it as active. and the gray color of all others persist Here is an open view

    1 answer 1

    In css3 there is a grayscale filter and it does what you want. Here is a simple example on css3 and jQuery . When you click on img all but the current added a certain class. And in this class added styles for grayscale .

     $(document).ready(function(){ $('img').on('click', function(event){ $('img').addClass('grayscale'); $(this).removeClass('grayscale'); event.stopPropagation(); }); $('body').on('click', function(){ $('img').removeClass('grayscale'); }); }); 
     img{ max-width: 100px; height: auto; } .grayscale { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url(grayscale.svg#greyscale); /* Firefox 4+ */ filter: gray; /* IE 6-9 */ -webkit-filter: grayscale(1); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <img src="http://4.bp.blogspot.com/-uVpL-stvY3A/VOjA8Pblu3I/AAAAAAAACgw/KLIKxsNbo3Y/s1600/Google%2BDomains.png"> <img src="http://cdn1.qcs.co.uk/wp-content/uploads/2014/10/A-pat-on-the-back.jpg"> <img src="http://static.wixstatic.com/media/6d4904_3e7a9d31cb9c49a0af1c48f0f378e99f.jpg_256"> <img src="https://www.extension.umn.edu/food/small-farms/img/main.jpg">

    • mda Something like that I tried, but for some reason your code blocks the disclosure of a hidden accordion block when clicked. however, I do not enter img in the click area, but a div class because the picture is in my background. but probably it does not matter. so the color switching takes place and the block is not revealed - Igor Igorev
    • this is understandable - this is because of the event.stopPropagation () method; if you remove it, the block opens and collapses. but then the color does not return. blocks remain discolored - Igor Igorev
    • Can you show a piece of your code? - Raz Galstyan
    • yes, the test.ufabike.ru/edrid $ (document) .ready (function () {$ ('. service-wrap'). on ('click', function (event) {$ ('. service- wrap '). addClass (' grayscale '); $ (this) .removeClass (' grayscale ');});}); - Igor Igorev
    • @ IgorIgorev Sechas I’ll tell you how to fix it - Raz Galstyan