Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements.

My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in the switch part).

I've been using jQuery with the not() selector to achieve this, but every time I click on a div, the entire #mosaique div becomes 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">Languages learned through Software Developer training. Check out my <a href="#">projects</a> for practical applications.</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">Libraries</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>Symfony Framework</p>
        <p>Used in a personal project (see projects).</p>
        <p>OpenClassroom certificate achieved</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">Design</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>
  <div class="row env">
    <div class="col-sm-6">
      <h3 class="bubbleTitle">Environment</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">Other Tools</h3>
      <div id="outils" 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>

Attempts made to solve the issue:

$('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');
javascriptjqueryhtmlcssselector

Answer №1

After receiving the solution, I am now sharing it with you:

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

In this case, I had to specifically target the descendants of the div multiple levels deep... While not the most elegant solution, it gets the job done. Appreciate your assistance mplungjan.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encode JavaScript field without affecting the appearance

I need to encode a specific search field before submitting it as a $_GET request. To do this, I am using the encodeURIComponent() function on that field before the form is submitted. $('#frmMainSearch').submit(function() { var field = $(this ...

javascriptjqueryformsgetencodeuricomponent

Dealing with JSON Stringify and parsing errors in AJAX

I've been troubleshooting this issue for hours, trying various suggestions found online, but I'm still encountering a problem. Whenever I encode function parameters using JSON.stringify and send them to my PHP handler through AJAX, I receive a pa ...

javascriptphpjqueryajaxjson

Tips for Placing a Div in a Precise Location

I'm currently working with Bootstrap and I'm attempting to replicate a layout similar to the one used by Twitter, as shown in the screenshot below. The specific part I'm struggling with is where the profile picture is located. I want to add ...

htmlcsstwitter-bootstrap

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

What could be causing my Chrome extension to function on Mac but not on a PC?

I created a basic Chrome extension that includes a background page with the following code: <script type="text/javascript> chrome.tabs.onDetached.addListener(function(tabId, info){ var id = tabId; chrome.tabs.get(id, function(tab) { ...

javascriptwindowsmacosgoogle-chrome-extension

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

cssangularjstemplatesfontssyntax-highlighting

Is it possible to utilize CSS rules for a non-existent div within CSS?

Can this be achieved using CSS? If .div1 is not present, enforce the following rule: .div2{ property: value; } For example, <div class="div1"> ... </div> <div class="div2"> <!-- it exists, so no action needed --> </div& ...

htmlcsscss-selectors

Adding middleware to the res.render() function can be extremely helpful when dealing with a large number

Recently, I put together a webpage for local use and it involves many routes. Specifically, I have 31 .ejs files and 3 .html files all neatly stored in the "views" folder. //app.js - using node and express app.get('/page1', function(req, res ...

javascriptnode.jsexpress

Deactivate the date when it reaches 8 in the current date count using ajax, php, and mysql

I want to prevent users from selecting a specific date after it has been chosen 8 times. Currently, when the date is selected for the 9th time, an alert box pops up. Instead of the alert box, I would like to disable that particular date selection altogethe ...

javascriptphpjquerymysqlajax

Choose value using jQuery option

How can I locate and select an option within a select element using its value? The select input is already a jQuery object. Here is the snippet of code I have written: my_select.filter("option[value='2']").attr('selected', "selected"); ...

jquery

Price and advantage in a single line of HTML code

Is there a valid reason for creating one-line HTML? Or is it better not to? I understand that reducing file size is a benefit, but we also need to consider the cost on the server of adding functions to generate one line HTML. Additionally, making changes ...

htmloptimization

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

javascripthtmlfunctioniterator

What steps can be taken to troubleshoot issues with the jquery mask plugin?

I am using the jQuery Mask Plugin available at to apply masks to input fields on my website. Currently, I am trying to implement a mask that starts with +38 (0XX) XXX-XX-XX. However, I am facing an issue where instead of mandating a zero in some places, ...

javascriptjqueryjquery-plugins

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

I've been facing an issue with a simple POST method to my API through the browser. The request fails, but when I try the same on Postman, it works fine. The response includes a JSON string and two cookies. In an attempt to resolve this, I set the hea ...

javascriptexpressvue.js

Error Alert: React Native object cannot be used as a React child within JSON, leading to an Invariant Violation

When using React-Native: To start, here is the example code of a json file: Any placeholders marked with "..." are for string values that are not relevant to the question. [ { "id": "question1" "label": "..." "option": [ { "order": 1, "name": "..."}, ...

javascriptjsonreactjsreact-native

Retrieve an image from the database and associate it with corresponding features or news in PHP

I have retrieved a value from the database, displayed it as an image, and made it a link. So, I want that when a user clicks on the different image, they get the result from the query related to the image. I hope everyone understands. <?php // Connect ...

javascriptphpmysqlajaxdatabase

How can I pass an Objective-C object to JavaScript?

Currently, I am working on a UIWebView project that involves HTML and JavaScript. One of my friends is working on something similar but for Android. The challenge I'm facing is that in Android, there is a simple way to send an Android object to JavaS ...

javascripthtmlobjective-cioswebkit

What is the best way to display HTML code using Vue syntax that is retrieved from an Axios GET request

I am currently working on a project that involves a Symfony 5 and Vue 3 application. In this setup, a Symfony controller creates a form and provides its HTML through a JSON response. The code snippet below shows how the form HTML is returned as a string: i ...

javascriptvue.jssymfonyvuejs3

Showing off HTML tags within react-json-tree

I have incorporated the following npm package into my project: https://www.npmjs.com/package/react-json-tree My goal is to showcase a json tree in react, but I am facing a challenge on how to include an HTML tag as a JSON value. Are there any alternative ...

javascriptjsonreactjs

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

cssvue.jssass