Javascript DOM Element hide and show via aria-hidden

Description

Javascript DOM Element hide and show via aria-hidden

View in separate window 


<!DOCTYPE html>
<head>
<style>
#msg/*ww  w  .j av  a 2s .c o  m*/
{
   background-color: #ffff00;
   font-weight: bold;
}
#msg[aria-hidden="true"]
{
   display: none;
}
</style>
<script>

window.onload=function() {
   document.getElementById("button1").onclick=hideshow;
   document.getElementById("msg").setAttribute("aria-hidden","true");
}

function hideshow() {
  let msg = document.getElementById("msg");
  let hidden = msg.getAttribute("aria-hidden");
  if (hidden == "true") {
     msg.setAttribute("aria-hidden", "false");
  } else { 
     msg.setAttribute("aria-hidden", "true");
  }
}
</script>

</head>
<body>
<div id="msg">
<p>child elements. </p>
</div>
<button id="button1">Hide/Show</button>
</body>
</html>



PreviousNext

Related