Applying CSS property in Jquery

Question

I am working on 'OnClick' functionality in jQuery. When we click Div property other divs should fade out.

Please find the code below. HTML:

<div>1</div>
<div class="ree">2</div>
<div class="foo">
  <div class = "bar">
     <div class="nike">3</div>
  </div>
</div>
<div>4</div>

jQuery:

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

              });

Here When I click on Div Class 'Nike', Except 'Nike' all Div classes should fade out. But here All Divs including Nike is fading out.

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

Thanks all

I will be needing that for future implementations.. :( is there anyway to do without removing those? — Louie
– Louie, Commented Oct 24, 2013 at 21:09
You could do it the brute force way and explicitly add the opacity of the other divs on click — agconti
– agconti, Commented Oct 24, 2013 at 21:12

Charlie74 · Accepted Answer · 2013-10-24 21:12:18Z

2

Since you have nested DIVs, those parent DIVs are getting faded out, also causing your nike div to fade out.

While this code isn't perfect... it works for what you need it to.

DEMO

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

So I'm basically listed the classes in your tree containing nike, making sure none of those are affected.

answered Oct 24, 2013 at 21:12

Charlie74

2,91317 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sam R Over a year ago

Perhaps having a class for the divs that might be faded (including the one you don't want to fade for this click) and then using .not() against that list.

arkihillel Over a year ago

That's a real lack of genericity.

zanetu · Accepted Answer · 2013-10-24 21:17:45Z

1

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

answered Oct 24, 2013 at 21:17

zanetu

3,9281 gold badge23 silver badges17 bronze badges

Comments

arkihillel · Accepted Answer · 2013-10-24 21:39:20Z

1

Well this code seems better suited

$('.nike').on('click', function () {
  $('div').each(function () {
    if ($('.nike').closest($(this)).length == 0) {
        $(this).css('opacity', '0.2');
    }
  })
});

http://jsfiddle.net/H17737/nr5bL/

answered Oct 24, 2013 at 21:39

arkihillel

3223 silver badges13 bronze badges

1 Comment

Louie Over a year ago

@H17737.. thank you so much.. Is there anyway to bring those numbers back to original if i click back on div class 'Nike' again?

mikedugan · Accepted Answer · 2013-10-24 23:35:21Z

1

I read the HTML all 10 kinds of wrong. Below is the revised, short sweet and to the point. Add class="hideThis" to any divs you would want to be "hidden". If you have multiple sibling divs that you want to hide/show on click, you could give them all the hideThis class and replace the $('.nike') with $('.hideThis')

$('.nike').click(function() {
  $(this).css('opacity','1'); //in case something else got clicked & hid this
  $('.hideThis').not($(this)).css('opacity','0.2'); //hide everything else
}

edited Oct 24, 2013 at 23:35

answered Oct 24, 2013 at 21:15

mikedugan

2,3933 gold badges20 silver badges25 bronze badges

2 Comments

Charlie74 Over a year ago

Is this right? <div>1<div> is not a parent div of nike. foo and bar are parent divs... but foo would be a sibling of <div>1<div>.

Louie Over a year ago

@Charlie74: thats correct.. but i tried that method in jsfiddle.. didn't work.. :(

Collectives™ on Stack Overflow

Applying CSS property in Jquery

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related