JSFiddle - React, Tailwind, and code Playground

by virsis12

HTML

<footer class=" footer">
    <hr>
        <ul class="menu">
            <li><a class="toggle" href="#submenu">submenu</a>
        <ol id="submenu" class="table-of-contents toggle-content is-mobile">
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li>
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
        </ol>
            </li>    
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
        </ul>
        <ol id="submenu" class="table-of-contents toggle-content is-desktop">
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li>
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
            <li><a href="#" class="content-entry">lorem the ipsum placeholder text</a></li> 
        </ol>
        <hr>
        <p class="additional">some text</p>
    </footer>

SCSS

/* menu on mobile vertical, on desktop horizontal */
.menu {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    @media (min-width: 768px) {
    flex-direction: row;        
    justify-content: space-between;
  };    
}
/* placing sub-menu in-between menu on mobile and below on desktop */
.table-of-contents.is-mobile {
    display:block;
  }
.table-of-contents.is-desktop {
    display:none;
  }
@media (min-width: 768px) {
.table-of-contents.is-desktop {
    display:block;
  }
.table-of-contents.is-mobile {
    display:none;
  } 
}
/* classes for clickable sub-menu DOES NOT WORK */
.toggle-content {
	display: none;
}

.toggle-content.is-visible {
	display: block;
}
/* content below the menu */
.additional {text-align:center;}

JavaScript

// Show an element
var show = function (elem) {
	elem.classList.add('is-visible');
};
// Hide an element
var hide = function (elem) {
	elem.classList.remove('is-visible');
};
// Toggle element visibility
var toggle = function (elem) {
	elem.classList.toggle('is-visible');
};
// Listen for click events
document.addEventListener('click', function (event) {
	// Make sure clicked element is our toggle
	if (!event.target.classList.contains('toggle')) return;
	// Prevent default link behavior
	event.preventDefault();
	// Get the content
	var content = document.querySelector(event.target.hash);
	if (!content) return;
	// Toggle the content
	toggle(content);
}, false);