Skip to content

Instantly share code, notes, and snippets.

@jeangontijo
Created June 6, 2018 21:08
Show Gist options
  • Save jeangontijo/a31305ea10cda242836a55e3a4c6719e to your computer and use it in GitHub Desktop.
Save jeangontijo/a31305ea10cda242836a55e3a4c6719e to your computer and use it in GitHub Desktop.
Toggle Data Attribute on Click
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;
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment