Using Javascript (VanillaJS) to add a click event and show/hide next elements

Question

I have a bunch of HTML set up like so:

<button class="btns">Button A</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>

<button class="btns">Button B</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>

So all the buttons are visible but all the <ul> are hidden. When a button is clicked, I want it to toggle the adjacent <ul> to show and another click to hide.

I am have some code like so that puts the event listener for the button click event but need to do what is mentioned above and adjust the aria-hidden attribute to false.

var e, divs = document.getElementsByClassName('btns');
var index = 0;

var ul = document.getElementsByClassName('unorder-list');
// var list

for (e in divs) {
var i = e;
    if (divs.hasOwnProperty(e)) {
        divs[e].onclick = function() {
 
        // Returns 'namedItem'
        alert(e);

         // Returns undefined
         alert(ul[index]);

         // Error    
         var visible = ul[index].style.display;

         // Do work here to show/hide and adjust attributes as needed
            
         alert(visibile);
         // document.getElementById(id).style.display = 'block';

        };


        index++;
    }
}

I am writing this to make sure the code is well-formed and accessible.

score 1 · Answer 1 · answered Jan 15 '21 at 20:34

function showme(idx){

document.getElementsByTagName('button')[idx].nextElementSibling.classList.toggle("showme")

}

ul{
visibility:hidden;}

.showme{
visibility:visible;}

<button class="btns" onclick='showme(0)'>Button A</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>


<button class="btns" onclick='showme(1)'>Button B</button>
<ul class="unorder-list" aria-hidden="true">
    <li>List</li>
    <li>List</li>
</ul>

AbsoluteBeginner · Answer 2 · 2021-01-16T08:35:48.023

My suggestion:

var list, setAria;

document.querySelectorAll('.btns').forEach(el => {
  el.onclick = () => {
    list = el.nextElementSibling;
    list.classList.toggle('show');
    setAria = list.getAttribute('aria-hidden') == 'true' ? 'false' : 'true';
    list.setAttribute('aria-hidden', setAria);
  }
});

ul {
  visibility: hidden;
}

.show {
  visibility: visible;
}

<button class="btns">Button A</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

<button class="btns">Button B</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

Without handling the aria-hidden attributes, JS code can simply be:

document.querySelectorAll('.btns').forEach(el => {
  el.onclick = () => el.nextElementSibling.classList.toggle('show');
});

How do i update the aria-hidden="false" and other attributes? I asked this in the original post. — cdub, Jan 15 '21 at 22:23

score 0 · Answer 3 · answered Jan 16 '21 at 06:29

document.querySelector("body").onclick =({target})=>
  target.classList.contains("btns") &&
  target.nextElementSibling.classList.toggle("show")

ul.unorder-list {visibility:hidden}
ul.show         {visibility:visible}

<button class="btns">Button A</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

<button class="btns">Button B</button>
<ul class="unorder-list" aria-hidden="true">
  <li>List</li>
  <li>List</li>
</ul>

I removed the scripting parts for handling the aria-hidden attributes since these should not be changed when an element is made visible or hidden to the user. Whenever an element is hidden it will be hidden for ARIA ("accessible rich internet application") readers anyway! aria-hidden should only be used if an element generally needs to be excluded from ARIA reader processing, see here (in particular the comments by Andrei Bârsan and eenblam under the accepted answer).

My click handler was is actually bound to the parent container of the buttons (delegated event handling). This way any dynamically added buttons and <ul>s will automatically be treated in the same way.

Using Javascript (VanillaJS) to add a click event and show/hide next elements

3 Answers3