Toggle Data Attribute on Click

toggle_data_attribute_onclick.js

var nav = document.querySelector('.nav__toggle');
var toggleState = function (elem, one, two) {
  var elem = document.querySelector(elem);
  elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
};

nav.onclick = function (e) {
  toggleState('.nav ul', 'closed', 'open');
  e.preventDefault();
};

// HTML
// <nav class="nav">
//    <a href="#" class="nav__toggle">Menu</a>
//    <ul data-state="closed">
//        <li>Item 1</li>
//        <li>Item 2</li>
//        <li>Item 3</li>
//        <li>Item 4</li>
//    </ul>
// </nav>

// CSS
// .nav ul[data-state=closed] {
//     display: none;
// }
// .nav ul[data-state=open] {
//     display: inherit;
// }