Unable to show/hide using Javascript and CSS

Question

Following some examples Ive seen, I am trying to be able to click to show/hide a Div ID. Content is hidden but when I click AFC Playoff Race, nothing happens. Any ideas what I am doing wrong?

CSS Style sheet includes:

.hidden { visibility: hidden; }
.unhidden { visibility: visible; }

Here is the javascript:

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>

Here is the HTML Code:

<div class="panel panel-afc nopad playoffs">
  <div class="panel-heading">
    <a href="javascript:unhide('afc-playoff-container');" rel="nofollow">AFC Playoffs</a>
  </div>
  <div class="panel-body">
    <div id="afc-playoff-container" class="hidden">
      <div id="afc playoff">
        <table class="data-table1" border="0" width="100%"></table>
      </div>
    </div>
  </div>
</div>

Do you have hidden/unhidden css classes defined in your css style sheets? — Patrick Evans
– Patrick Evans, Commented May 3, 2016 at 15:14
Yes, its typo. Yes, .hidden and .unhidden are in the Stylesheet. — jack213
– jack213, Commented May 3, 2016 at 15:21
Do your elements have actual content? If not than you will not actually see anything being hidden/shown as divs and tables by default do not have visual borders, backgrounds etc — Patrick Evans
– Patrick Evans, Commented May 3, 2016 at 15:25

0xdw · Accepted Answer · 2016-05-03 16:14:36Z

4

function unhide() {
  var item = document.querySelector(this.dataset.target);
  if (item) {
    item.classList.toggle('hidden');
  }
}

window.onload = function() {
  var toggleDivs = document.getElementsByClassName('toggleDiv');
  if (toggleDivs) {
    for (var i = 0; i < toggleDivs.length; i++) {
      toggleDivs[i].addEventListener('click', unhide);
    }
  }
};

.hidden {
  display: none;
}
#afc-playoff-container {
  width: 120px;
  height: 120px;
  background: #DDDDDD;
}

<div class="panel panel-afc nopad playoffs">
  <div class="panel-heading">
    <a href="javascript:;" class="toggleDiv" data-target='#afc-playoff-container' rel="nofollow">AFC Playoffs</a>
  </div>
  <div class="panel-body">
    <div id="afc-playoff-container" class="hidden">
      <div id="afc playoff">
        <table class="data-table1" border="0" width="100%"></table>
      </div>
    </div>
  </div>
</div>

edited May 3, 2016 at 16:14

answered May 3, 2016 at 15:18

0xdw

3,8522 gold badges29 silver badges44 bronze badges

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

5 Comments

jack213 Over a year ago

Thanks, but still no joy. The table grabs data from somewhere else. So thats why I dont have it defined with content. When I try your code, it takes me to the top of the page but doesnt display. Look here, on the left side youll see AFC Playoffs. That is clickable. But it wont show the content like you would see similar to whats shown for NFC Playoffs. Www.daddyleagues.com/madscrubs

jack213 Over a year ago

When you get a chance can you see my response and check out the page?

jack213 Over a year ago

Youre the best DININDU. Thank you so much!

jack213 Over a year ago

One last thing. Is it possible to use this code for div id's with the same name? From testing it, it seems to not control more than one Div ID. I have another ID with same name, but it does not show/hide.

0xdw Over a year ago

@jack213. That's why i use it with class

ian m · Accepted Answer · 2016-05-03 15:17:07Z

1

It works, you just didn't apply styles to the classes hidden and unhidden. See this codepen for what I mean.

Good luck!

answered May 3, 2016 at 15:17

ian m

5143 silver badges7 bronze badges

1 Comment

Patrick Evans Over a year ago

Include code examples directly into your answers, links can rot and users shouldn't have to go to a external site to see it.

Collectives™ on Stack Overflow

Unable to show/hide using Javascript and CSS

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related