Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs.

Below you can find the HTML code:

<div>1</div>
<div class="ree">2</div>
<div class="foo">items
  <div class = "bar">Shoes
     <div class="nike">3</div>
     <div class="puma">5</div>
     <div class="gap">5</div>
  </div>
</div>
<div>4</div>

This is how the jQuery code is structured:

$('.foo').on('click',function ()
              {
$('div:not(.foo)').css('opacity','0.2')

              });

The desired effect of clicking on the 'foo' class div is to display only 'foo' and its child divs like 'bar', 'nike', 'puma', and 'gap', while fading out all other div classes.

You can view a demo by visiting the following link:

http://jsfiddle.net/6V8hr/15/

Thank you for your assistance!

Answer №2

To exclude the child divs as well, your :not selector just needs to include them in the exclusion list. You can add multiple elements to the not selector just like any other:

$('.foo').on('click', function(){
  $('div:not(.foo, .foo div)').css('opacity','0.2');
});

Check out the updated JSFiddle here: http://jsfiddle.net/6V8hr/17/

Answer №3

In my opinion, the goal is to gradually fade out all divs except for .foo and its children. You can achieve this by utilizing the $.siblings() selector.

$('.foo').on('click', function () {
    $(this).siblings().css('opacity','0.3')
});

Answer №4

No value was assigned to the foo class div:

<div>1</div>
<div class="ree">2</div>
<div class="foo"> Value here              <-----
  <div class = "bar">Shoes
     <div class="nike">3</div>
<div class="puma">5</div>
<div class="gap">5</div>
  </div>
</div>
<div>4</div>

If 'Value here' is clicked, all the divs will fade out to apply your code.


To achieve your desired outcome, consider using a better class matching qualifier such as .siblings() or .children(), as suggested by others in the thread.

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

What could be causing the alignment issue with cells in Bootstrap?

I'm currently facing an issue with Bootstrap where two columns that are supposed to appear side-by-side on medium resolution end up displaying one below the other. You can view a screenshot of the problem here, and the code can be found at this link. ...

Setting the minimum width for Cards in Bootstrap: A How-To Guide

I'm facing an issue with Bootstrap cards. When I set a minimum width for the cards, they end up overlapping as I reduce the window width. How can I ensure that the third card moves to the next row to prevent this overlapping? https://i.sstatic.net/XA ...

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

I'm encountering the ExpressionChangedAfterItHasBeenCheckedError due to my getter function, selectedRows, in my component. public get selectedRows() { if (this.gridApi) { return this.gridApi.getSelectedRows(); } else { return null; } } ...

Loading a local CSS file upon opening a tab with a specific URL

When opening a tab to load a local HTML file from an addon (using addon-sdk), the following code is used: tabs.open({ url: self.data.url('index.html'), onReady: myScript }); However, there seems to be no straightforward way to include a CSS ...

Check the box to track the current status of each individual row

Recently, I encountered an issue with a form containing dynamic rows. Upon fetching records, my goal was to update the status of selected rows using checkboxes. Although I managed to retrieve checkbox values and dynamic row IDs successfully in the console ...

I am able to successfully receive accurate data in JSON format, however I am facing difficulties binding it to a jquery

I am struggling with integrating data fetched in JSON format using $.ajax into a table using jquery's datatable. Below is the JavaScript code I have been trying: $(document).ready(function () { $.ajax({ type: "POST", url: "Result.aspx/getUser ...

Utilize Jsoup to retrieve a specific value from a designated HTML source

I am currently working on a project that involves extracting all currency values and their corresponding names from a specific website. These extracted values need to be stored in two separate arrays. While researching online, I came across some code snip ...

Differentiate the items within a list containing identical divs using JavaScript

Currently, I am expanding my knowledge in HTML, CSS, and JS by incorporating Angular and JQuery. In one of my projects, there is a div labeled "eventBoxes" where multiple divs known as "eventBox" can be added. I have created a template for the eventBox i ...

Having trouble with submitting a form through Ajax on Rails 4

Having models for advertisement and messages with forms that both utilize Ajax (remote => true) for submission. The message form submits perfectly, remains on the same page, and handles the response efficiently. However, the advertisement form fails to ...

limiting jquery selector to target only the td elements within a table

I have a table generated by asp.net that functions as a slide show. To make the slide show work properly, I need to select only the root td elements of the table. This becomes an issue when the table has multiple rows. The jquery cycle plugin is being used ...

Executing JQuery code and utilizing external libraries in Ionic (Angular JS) to power my hybrid application

Currently, I am in the process of developing an Ionic app for my website and incorporating all JQuery code along with external libraries such as Lightbox, Slider, etc. I was wondering if anyone could provide me with guidance (preferably with an example) o ...

Enhancing the camera functionality of the HTML <input> tag for iPhone and Android devices

I am currently working on a mobile web application that requires access to the device's camera. I am aware that this can be achieved using the following code: <input type="file" accept="image/*" capture="camera" /> The code snippet above suc ...

Can someone assist me with accessing jQuery variables within the agiletoolkit (ATK4) framework?

I am trying to retrieve the window height and width of the browser using ATK4, a PHP framework integrated with jQuery The JavaScript code for this would be $(window).height(); $(window).width(); Since agiletoolkit works with jQuery, I believe it shou ...

Is it possible to utilize the event load function while offline with a text file?

Is there a way to load a div that I have saved as plain text (in a file)? The file is located in the same root directory as my HTML page. I am attempting to call this file using jQuery's event load on my HTML page like this: $("#tab2").load("textfile ...

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

<table id="DataTable" border="1" ALIGN="center"> <tr ALIGN="center"> <th>name</th> <th>address</th> <th>number</th> <th>type</th> </tr> <tr class="tcat" *ngFor ...

Find the div element that wraps around the currently selected radio button

Take a look at this code snippet: <div class="paymentOption"> <input type="radio" name="paymentOption" value="1" /> <span class="marginLeft10">1-time payment using a different credit card</span> </div> Is it feasible ...

How to determine if a scrolling action is initiated manually using jQuery

Here is a question that was previously asked long ago: Detect jquery event trigger by user or call by code Despite previous inquiries, a conclusive answer has not been provided (or I may just be inadequate at searching). My query pertains to distinguish ...

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID

It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...

Is it possible to include line breaks within a CSS value?

(I am posting this here because I couldn't find a solution and eventually figured it out through trial and error. Hopefully, this information can help others with the same question.) Note: This is not the same as the discussion on Single-line vs mult ...

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

I need assistance with adding an overlay to only the bootstrap 4 figure-img. In order to achieve this, I inserted a div with the class overlay beneath the figure-img. Below is the code snippet: <div class="col-md-4"> <figure class="service tex ...