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

Answer 1

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.

Answer 2

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
}

Answer 3

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

Answer 4

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/