Trying to select all except one - not() Jquery Selector

Question

I've got a mosaic (div #mosaique) which contains different div.

What I want is when I click on one of my div,for eg #langages or #libraries etc..., the other div became opaque, and the selected div has some size changes (that part works perfectly fine,see the switch part).

I'm using JQuery to do so with the not() selector, but so far each time I click on my div the whole div #mosaique become opaque.

 $('#mosaique').on('click', function(e) { //get the id of the element that has been clicked on var target = $(e.target).closest('div').attr('id'); //HERE THE CODE WHERE I SELECT ALL DIV FROM #MOSAIQUE EXCEPT TARGET switch (target) { case 'langages': $('.langText').css('display', 'block'); $('#langages').css('position', 'absolute'); $('#langages').css('z-index', '9999'); $('#langages').animate({ width: "1000px", height: "1000px", top: "250%", left: '70%' }, 'slow'); break; case 'librairies': $('#librairies').css('position', 'absolute'); $('#librairies').css('z-index', '9999'); $('#librairies').animate({ width: "1000px", height: "1000px", top: "250%", left: '-30%' }, 'slow'); break; case 'cms': $('#cms').css('position', 'absolute'); $('#cms').css('z-index', '9999'); $('#cms').animate({ width: "1000px", height: "1000px", top: "250%", right: '77%' }, 'slow'); break; case 'framework': $('#framework').css('position', 'absolute'); $('#framework').css('z-index', '9999'); $('#framework').animate({ width: "1000px", height: "1000px", top: "-470%", left: "70%", }, 'slow'); break; case 'techno': $('#techno').css('position', 'absolute'); $('#techno').css('z-index', '9999'); $('#techno').animate({ width: "1000px", height: "1000px", top: "-470%", right: '-24%' }, 'slow'); break; case 'conception': $('#conception').css('position', 'absolute'); $('#conception').css('z-index', '9999'); $('#conception').animate({ width: "1000px", height: "1000px", top: "-470%", left: '-130%' }, 'slow'); break; case 'environnement': $('#environnement').css('position', 'absolute'); $('#environnement').css('z-index', '9999'); $('#environnement').animate({ width: "1000px", height: "1000px", top: "-1200%", left: "47%", }, 'slow'); break; case 'tools': $('#tools').css('position', 'absolute'); $('#tools').css('z-index', '9999'); $('#tools').animate({ width: "1000px", height: "1000px", top: "-1200%", right: '50%' }, 'slow'); break; default: $(target).removeAttr('style'); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mosaique"> <div class="row langLibCMS"> <div class="col-sm-4"> <h3 id="lang" class="bubbleTitle">Langages</h3> <div id="langages" class="bubble"> <h1 class="langText">Langages appris via la formation Développeur Logiciel. N'hésitez pas à consulter mes <a href="#">réalisations</a> pour leur mise en pratique</h1> <img src="../img/html2.png" id="html2" alt="html" /> <img src="../img/css2.png" id="css2" alt="css" /> <img src="../img/javascript2.png" id="javascript2" alt="javascript" /> <img src="../img/android2.png" id="android2" alt="android" /> <img src="../img/php2.png" id="php2" alt="html" /> <img src="../img/mysql2.png" id="mysql2" alt="css" /> <img src="../img/java2.png" id="java2" alt="javascript" /> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">Librairies</h3> <div id="librairies" class="bubble"> <img src="../img/bootstrap.png" id="bootstrap" alt="bootstrap" /> <img src="../img/materialDesign.png" id="materialDesign" alt="materialDesign" /> <img src="../img/jquery.png" id="jquery" alt="jquery" /> <img src="../img/pear.png" id="pear" alt="pear" /> <img src="../img/phpseclib.png" id="phpseclib" alt="phpseclib" /> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">CMS</h3> <div id="cms" class="bubble"> <img src="../img/wordpress.jpg" id="wordpress" alt="wordpress" /> <img src="../img/prestashop.png" id="prestashop" alt="prestashop" /> </div> </div> </div> <!-- row langLibCMS --> <div class="row frameTechConcep"> <div class="col-sm-4"> <h3 class="bubbleTitle">Framework</h3> <div id="framework" class="bubble"> <img src="../img/sf.png" id="symfony" alt="symfony" /> <p>Framework Symfony</p> <p>Utilisé dans le cadre d'un projet personnel (cf réalisation).</p> <p>Certificat de réussite OpenClassroom obtenu</p> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">Technologies</h3> <div id="techno" class="bubble"> <img src="../img/ajax.png" id="ajax" alt="ajax" /> <img src="../img/webrtc.png" id="webrtc" alt="webrtc" /> <img src="../img/ionic.png" id="ionic" alt="ionic" /> </div> </div> <div class="col-sm-4"> <h3 class="bubbleTitle">Conception</h3> <div id="conception" class="bubble"> <img src="../img/uml.png" id="uml" alt="uml" /> <img src="../img/jmerise.png" id="merise" alt="merise" /> </div> </div> </div> <!-- row --> <div class="row env"> <div class="col-sm-6"> <h3 class="bubbleTitle">Environnement</h3> <div id="environnement" class="bubble"> <img src="../img/linux.png" id="linux" alt="linux" /> <img src="../img/ms.png" id="microsoft" alt="microsoft" /> </div> </div> <div class="col-sm-6"> <h3 class="bubbleTitle">Autres outils</h3> <div id="tools" class="bubble"> <img src="../img/mysqlworkbench.png" id="mysqlworkbench" alt="mysqlworkbench" /> <img src="../img/lamp.png" id="lamp" alt="lamp" /> <img src="../img/wamp.jpg" id="wamp" alt="wamp" /> <img src="../img/netbeans.png" id="netbeans" alt="netbeans" /> <img src="../img/eclipse.png" id="eclipse" alt="eclipse" /> <img src="../img/putty.jpg" id="putty" alt="putty" /> <img src="../img/virtualbox.jpg" id="virtualbox" alt="virtualbox" /> </div> </div> </div> </div> <!-- div mosaique--> 

Here are the solutions I've tried:

    $('div#mosaique > div').not($(#target)).css('opacity', '0.5');
    $('#mosaique div:not(#target)').css('opacity', '0.5'); 
    $('div #mosaique:not(#target)').css('opacity', '0.5');
    $('#mosaique').children().not($('#'+target)).css('opacity', '0.5');

Answer 1

I've been given the solution, so here I share it with you:

$('#mosaique > div > div > div').not($('#'+target)).css('opacity', '0.5');

I had to select the children of the children of the children of the div... Not a very "beautiful" solution but it does do the job. Thanks for your time mplungjan.