1

I have a navigation with three links. What I want to do is to show one of three boxes paired on these links if a specific link is clicked. I have these <li> elements with data-nav set:

<li class="active" data-nav="1">Prerender</li><li data-nav="2">Prefetch</li><li data-nav="3">Preconnect</li>

I also have these three boxes, which should be visible only if paired <li> element is clicked

<div class="content-box box1">
        <h3 id="isPrerender"> Prerendered page: <span id='pagetitle'></span></h3>
      </div>

      <div class="content-box box2">
        <h3 id="isPrerender"> Page2: <span id='pagetitle'></span></h3>
      </div>
    </div>

This is what I have in my .css file

.box1, .box2, .box3{display: none;}
        .expanded{display: block !important;}

This is where I set the expanded class on the box which is paired with the <li> element clicked:

for (var i = 0; i < menu_items.length; i++) {
  menu_items[i].onclick = function() {

  var navId = this.getAttribute('data-nav');
  document.getElementByClassName('box' + navId).classList.add('expanded');

    }
  }
}

The problem is that display: none is still set even when I add the expanded class. If I look into console, the display: block rule is here but is erased. How to rewrite It?

Improve this question
4
  • 2
    document.getElementByClassName is not a function. It should be getElementsbyClassName Commented Feb 6, 2019 at 18:58
  • that didn't fix it @chazsolo Commented Feb 6, 2019 at 19:00
  • well "Elements" returns an html Collection.... Commented Feb 6, 2019 at 19:05
  • I hope that didn't fix it, otherwise I'd be answering in a comment! :) Just pointing out a syntax issue that hopefully should point you in the right direction of why it isn't working. As epascarello said, it's a collection... so you can't just call classList directly on it. (and when this is done right, you won't need !important. I'd recommend dropping that now) Commented Feb 6, 2019 at 19:07

1 Answer 1

Reset to default
0

I think you can set display none in first load with JavaScript or (hide element) then in function set display block or (show the element) And don't use !important for the class if you want to replace or you should remove class then add other class

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

Comments