CODEWITHSUNDEEP
javascripthtmlcss
Will Mays
Will Mays

Reputation: 102

JS and HTML hide div not working

I have built a tab bar website that only uses one page I am using js to hide 3 elements and show one. When I click the links to show one and hide the others everything is messing up and 3 are shown or 2 it's random. Here is my code.

function unhide(divID, otherDivId, otherDivId, otherDivId) {
  var item = document.getElementById(divID);
  if (item) {
    item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
  }
  document.getElementById(otherDivId).className = 'hidden';
}
.hidden {
  display: none;
}

.unhidden {
  display: block;
}
<div id="tweaked" class="hidden">
  <p>Test1</p>
  <footer class="bottom">
    <a class="tab current" href="javascript:unhide('home', 'tweaked', 'other', 'more')">Home<i class="material-icons">home</i></a>
    <a class="tab" href="javascript:unhide('tweaked', 'home', 'other', 'more')">Tweaks<i class="material-icons">view_headline</i></a>
    <a class="tab" href="javascript:unhide('other', 'home', 'tweaked', 'more')">Other<i class="material-icons">view_headline</i></a>
    <a class="tab" href="javascript:unhide('more', 'tweaked', 'other', 'more')">More<i class="material-icons">share</i></a>
  </footer>
</div>

Upvotes: 0

Views: 377

Answers (2)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Perhaps you want something like this:

var anchors = document.querySelectorAll(".bottom .tab"),
    showHide = function(e) {
      var parent = this.parentNode;
      
      anchors.forEach(a => {
        var relatedDiv = document.getElementById(a.dataset.tab),
            aClass = a.className.trim();
        
        if (a.dataset.tab != this.dataset.tab) {
          relatedDiv.className = relatedDiv.className.replace("unhidden", "") + " hidden";
          a.className = aClass.replace("current", "");
        } else {
          relatedDiv.className = relatedDiv.className.replace("hidden", "") + " unhidden";
          a.className = aClass.replace("current", "") + " current";
        }
      });
    };

anchors.forEach(a => a.addEventListener("click", showHide));
.hidden{
    display:none;
}
.unhidden{
    display:block;
}
<div id="home" class="unhidden">
    <p>Home</p>
</div>
<div id="tweaked" class="hidden">
    <p>Tweaks</p>
</div>
<div id="other" class="hidden">
    <p>Other</p>
</div>
<div id="more" class="hidden">
    <p>More</p>
</div>
<footer class="bottom">
    <a class="tab current" href="#" data-tab="home">Home<i class="material-icons">home</i></a>
    <a class="tab" href="#" data-tab="tweaked">Tweaks<i class="material-icons">view_headline</i></a>
    <a class="tab" href="#" data-tab="other">Other<i class="material-icons">view_headline</i></a>
    <a class="tab" href="#" data-tab="more">More<i class="material-icons">share</i></a>
</footer>

Upvotes: 1

Felix Mayer
Felix Mayer

Reputation: 1

Have you tried item.classList ? Element.classList | MDN

You could try something like this:

if(item.classList.contains("hidden")){
    item.classList.remove("hidden");
    item.classList.add("unhidden");
}else{
    item.classList.add("hidden");
    item.classList.remove("unhidden");
}

Upvotes: 0

Related Questions