JS and HTML hide div not working

Question

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>

`otherDivId, otherDivId, otherDivId` What do you expect that to do? — epascarello, Aug 28 '17 at 20:42
@epascarello there are 4 div's and when you unhide 1 it hides the other 3 — Will Mays, Aug 28 '17 at 20:43
It is a really, really bad habit to have inline javascript (in your anchors) and a script as well. I would move everything to the script. — Sablefoste, Aug 28 '17 at 20:43
Yes, but you can not use the same variable name for each. Most developers will have a collection of all the elements, loop over it and hide. — epascarello, Aug 28 '17 at 20:44
@Santi I fixed it to show that but someone edit my code and removed it — Will Mays, Aug 28 '17 at 20:45
@epascarello so change to otherDivId1, otherDivId2, otherDivId3? — Will Mays, Aug 28 '17 at 20:46
@WillMays Post-edit, epascarello is correct. You can't name multiple parameters the same name. How would the code possibly know which one you're referring to...? And this method is *not suggested*. What happens if you add more ``s? What if you add 10? Your function is going to have 14 parameters! Instead, use a more generic method. — Tyler Roper, Aug 28 '17 at 20:46
**SIDE NOTE:** What the heck is going on with the editing here? The first edit of this question removed parameters from the function for no apparent reason. It was finally sorted, and then was re-edited again 2 minutes ago to remove the same parameters. **The parameters are not a typo. Stop removing them.** — Tyler Roper, Aug 28 '17 at 20:49
@Santi I forgot to add them there than I did add them then someone removed it. I'm not sure why but I added it back — Will Mays, Aug 28 '17 at 20:50
Correct. You added them shortly after your original post. Then, someone edited your question and removed them entirely. Then, you added them back. Yet again, someone edited your question and removed them. I believe all is correct now. - Consider looping through your divs like @epascarello said. Try [something like this](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript). — Tyler Roper, Aug 28 '17 at 20:52

DontVoteMeDown · Accepted Answer · 2017-08-28T21:01:42.623

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>

There should be a footer in each div with the corresponding "tab current" — Will Mays, Aug 28 '17 at 20:54
@WillMays like that ? You really don't need to copy the footer for each div actually.. — DontVoteMeDown, Aug 28 '17 at 20:55
The js is not working its not showing or hiding anything just staying on home — Will Mays, Aug 28 '17 at 21:00

score 0 · Answer 2 · answered Aug 28 '17 at 20:46

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");
}

JS and HTML hide div not working

2 Answers2