JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd');">PAGE LINK 1</span>
</div>
<div id="dl_sub_dd">
    <ul>
        <li>sub page</li>
        <li>sub page</li>
    </ul>
</div>
<!--end dept_links_sub-->
<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd1');">PAGE LINK 2</span>
</div>
<div id="dl_sub_dd1">
    <ul>
        <li>sub page</li>
        <li>sub page</li>
    </ul>
</div>
<!--end dept_links_sub-->

CSS

span {
    cursor:pointer;
}
#dl_sub_dd, #dl_sub_dd1 {
    display:none;
}

JavaScript

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}