CODEWITHSUNDEEP
javascriptcss
jack213
jack213

Reputation: 13

Unable to show/hide using Javascript and CSS

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>

Upvotes: 1

Views: 337

Answers (2)

0xdw
0xdw

Reputation: 3842

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>

Upvotes: 4

ian m
ian m

Reputation: 514

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

Good luck!

Upvotes: 1

Related Questions