CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Louie
Louie

Reputation: 1

Applying CSS property in Jquery

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

Upvotes: 0

Views: 125

Answers (4)

mikedugan
mikedugan

Reputation: 2393

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
}

Upvotes: 1

arkihillel
arkihillel

Reputation: 322

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/

Upvotes: 1

zanetu
zanetu

Reputation: 3898

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

Upvotes: 1

Charlie74
Charlie74

Reputation: 2903

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.

Upvotes: 2

Related Questions