JSFiddle - React, Tailwind, and code Playground

by taylorRichie

HTML

<nav>
    <ul>
        <li id="nav_capabilities">
            <a href="#">
                <details>
                    <summary>Capability</summary>
                    <span class="nav_subText">A rundown of our services</span>
                </details>
            </a>
        </li>
        <li id="nav_capacity">
            <a href="#">
                <details>
                    <summary>Capacity</summary>
                    <span class="nav_subText">How much can we handle</span>
                </details>
            </a>
        </li>
        <li id="nav_credibility">
            <a href="#">
                <details>
                    <summary>Credibility</summary>
                    <span class="nav_subText">The quality of being trustworthy</span>
                </details>
            </a>
        </li>
    </ul>
</nav>

CSS

summary {
 color: red;   
}
details span {
    display: none;    
}
details[open] span {
    display: block;    
}

JavaScript

if (!('open' in document.createElement('details'))) {
    var qSums = document.getElementsByTagName('summary');
    
    for(var x=0, sumLen=qSums.length;x<sumLen;++x) {
        qSums[x].addEventListener('click', function() {
            var deets = this.parentNode;
            if(deets.getAttribute('open') === "open") {
                deets.removeAttribute('open');
            } else {
                deets.setAttribute('open', 'open');
            }
        }, false);   
    }
}