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
– epascarello, Commented Aug 28, 2017 at 20:42
@epascarello there are 4 div's and when you unhide 1 it hides the other 3 — Will Mays
– Will Mays, Commented Aug 28, 2017 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
– Sablefoste, Commented Aug 28, 2017 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
– epascarello, Commented Aug 28, 2017 at 20:44

DontVoteMeDown · Accepted Answer · 2017-08-28 21:01:42Z

1

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>

edited Aug 28, 2017 at 21:01

answered Aug 28, 2017 at 20:53

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

5 Comments

Will Mays Over a year ago

There should be a footer in each div with the corresponding "tab current"

DontVoteMeDown Over a year ago

@WillMays like that ? You really don't need to copy the footer for each div actually..

Will Mays Over a year ago

I change the footer class value based on what div it is

Will Mays Over a year ago

The js is not working its not showing or hiding anything just staying on home

DontVoteMeDown Over a year ago

@WillMays check update. Check the classes of the links.

Felix Mayer · Accepted Answer · 2017-08-28 20:46:59Z

0

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

answered Aug 28, 2017 at 20:46

Felix Mayer

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

JS and HTML hide div not working

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related