Making a dropdown menu for mobile

Question

I'm trying to use media queries and javascript to make a dropdown menu for my page. I have the content i want to be in the menu in a <div> marked with a class, in this case. class="other-pages" . My media query has 2 classes in it: .other-pages.closed and .other-pages.open . My goal is to use javascript to change the class once the media query is active to the closed class. Then make a button i have, change the class to the open version.

So here's what I have so far.

let menuContentBase = document.getElementsByClassName('.other-pages');

let mediaQueryMax = window.matchMedia('(max-width: 1080px)');

if (mediaQueryMax.matches) {
    menuContentBase.classlist.remove('.other-pages');
    menuContentBase.classlist.add('other-pages.closed');
}

When I load this into my browser and look in the debugger however it says menuContentBase.classlist is undefined.

Not entirely sure what to do from here.

Thank you for any advice/recommendations you may have.

Answer 1

Its a simple toggle

 let element = document.querySelector(".mq-value") element.addEventListener('click', (e)=>{ e.target.classList.contains('open') ? e.target.classList.remove('open') : e.target.classList.add('open') })

 .open{ color:red }

 <div class="mq-value open"> toggle </div>

Answer 2

I think the issue is in the class name. When it comes to document.getElementsByClassName , you don't need to put . before the class name. Replae this

let menuContentBase = document.getElementsByClassName('.other-pages');

with this

let menuContentBase = document.getElementsByClassName('other-pages');

If you want further information about this, you can refer https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Also, same for classList not classlist and the L must be uppercase.

if (mediaQueryMax.matches) {
    menuContentBase.classList.remove('other-pages');
    menuContentBase.classList.add('other-pages.closed');
}

Try this one and let me know if it's works or not. Thank you!