What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use a button for each nested list, then toggle that list’s visibility and the button’s aria-expanded state together. The example below treats all three disclosures as independent: opening one does not close the others.
Put each nested list inside the item it belongs to
A nested <ul> should be placed inside the relevant parent <li>, not alongside it. This preserves the list hierarchy for browsers and assistive technology. See MDN’s unordered-list element reference.
Build three independent disclosures
Each button controls one list. The lists start hidden, with matching aria-expanded="false" states. When activated, a button reveals or hides only its own list. The disclosure pattern describes this interaction as content that can be collapsed or expanded; aria-controls identifies the controlled element by ID, while aria-expanded communicates its current state. See the WAI-ARIA disclosure pattern and MDN’s aria-expanded reference.
<ul>
<li>
First section
<button type="button" aria-expanded="false" aria-controls="list-one">
Show first section
</button>
<ul id="list-one" hidden>
<li>First child</li>
<li>
Second section
<button type="button" aria-expanded="false" aria-controls="list-two">
Show second section
</button>
<ul id="list-two" hidden>
<li>Second-level child</li>
<li>
Third section
<button type="button" aria-expanded="false" aria-controls="list-three">
Show third section
</button>
<ul id="list-three" hidden>
<li>Third-level child</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
document.querySelectorAll('button[aria-controls]').forEach((button) => {
const list = document.getElementById(button.getAttribute('aria-controls'));
button.addEventListener('click', () => {
const willExpand = button.getAttribute('aria-expanded') !== 'true';
button.setAttribute('aria-expanded', String(willExpand));
list.hidden = !willExpand;
});
});
</script>The hidden attribute supplies the initial collapsed state; JavaScript updates it on click. The code also sets the button’s ARIA state at the same time, so the visual and announced states stay aligned. The native button works with keyboard activation, including Enter and Space, as described in the WAI disclosure pattern.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
Use a CSS class instead of the hidden attribute
If the project already uses a class to control visibility, the same state logic can toggle a class with classList. For example, define .is-hidden { display: none; }, add that class to each list initially, and replace list.hidden = !willExpand; with list.classList.toggle('is-hidden', !willExpand);. Keep the initial class, initial aria-expanded value, and JavaScript behavior consistent. MDN documents Element.classList.
Choose accordion behavior only if that is what you need
The example deliberately allows multiple lists to remain open. If the requirement is an accordion, add logic that closes the other disclosures when one opens, and update each affected button’s aria-expanded value as well as its list visibility. Do not change only the visuals: the state exposed to assistive technology must reflect the actual state.
Rank #2
If the lists are site navigation
Keep navigation links as ordinary links and use buttons to reveal their sublists. WAI’s disclosure-navigation example does not apply the ARIA menu role to ordinary website navigation, despite using “menu” colloquially. It also recommends considering how people who have difficulty with fly-out interactions can still reach submenu links. See the WAI disclosure navigation example and its guidance on fly-out menus.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
