Mit JavaScript und CSS nicht ein-/ausblenden

Question

Nach einigen Beispielen, die ich gesehen habe, versuche ich zu klicken, um eine Div ID anzuzeigen/auszublenden. Der Inhalt ist ausgeblendet, aber wenn ich auf AFC Playoff Race klicke, passiert nichts . Irgendwelche Ideen, was ich falsch mache?

CSS-Stylesheet enthält:

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

hier das Javascript ist:

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

Hier ist der 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> 

Answer 1

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>

Answer 2

Es funktioniert, Sie haben gerade keine Anwendung Stile zu den Klassen und unhidden. Siehe this codepen für was ich meine.

Viel Glück!