JSFiddle - React, Tailwind, and code Playground

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

var qSums = document.getElementsByTagName('summary');

for(var x=0, sumLen=qSums.length;x<sumLen;++x) {
    console.log(qSums[x]);
    qSums[x].addEventListener('click', function() {
        var deets = this.parentNode;
        if(deets.getAttribute('open') === "open") {
            deets.removeAttribute('open');
        } else {
            deets.setAttribute('open', 'open');
        }
    }, false);   
}