JQuery Hide or Show by ID Attribute

Asked Dec 26 '19 at 15:00

Active Dec 26 '19 at 15:09

Viewed 37 times

I'm trying to 'show' a div, while hiding other sibling divs using jQuery. Here is my code:

const jq = require('jquery');  


function hideAllBut (ShowDivID) {
  alert('test');
  jq('div.content > div').each( () => {
      if (jq(this).attr('id') === ShowDivID) {
          alert(jq(this).attr('id'));
          jq(this).show();
      } else {
        alert(jq(this).attr('id'));
          jq(this).hide();
      }
  });
}

The function alerts at test, and alerts 'undefined' twice (as expected) under the 'else' statement. The content that is shown by default is not hidden. So I have two problems - my call to get the 'id' attribute is not working, and the hide() function is not hiding the div. Any ideas what I'm doing wrong?

The html looks like:

<html>
  <body>
    <div class='content'>
      <div id='a'>
      </div>
      <div id='b' hidden>
      </div>
    </div
  </body>
</hhtml>

edited Dec 26 '19 at 15:09

asked Dec 26 '19 at 15:00

tmptplayer

5

Instead of `arrow function`, use `function() {}` i:e `jq('div.content > div').each( function() {} )` , as arrow functions do not have there own this. – random Dec 26 '19 at 15:06
1

@random you should post this as answer. – Ritesh Khandekar Dec 26 '19 at 15:11
1

Could potentially be reduced. https://jsfiddle.net/tg0e3Lza/ – Taplar Dec 26 '19 at 16:16
@Taplar - you're right. Thanks! – tmptplayer Dec 26 '19 at 16:52

JQuery Hide or Show by ID Attribute

0 Answers0