<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
aria-hidden attribute on JQuery Show/Hide functions
</
title
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.access {
margin-left: 90px;
}
</
style
>
</
head
>
<
body
>
<
br
><
br
>
<
div
class
=
"row"
>
<
div
class
=
"col-sm-4"
>
<
center
>
<
button
class
=
"btn btn-success"
>
Toggle
</
button
>
</
center
>
</
div
>
<
div
class
=
"col-sm-8"
>
<
p
><
i
>aria-hidden</
i
> attribute's value :
<
b
>
<
span
id
=
"answer"
>false</
span
>
</
b
>
</
p
>
</
div
>
</
div
>
<
br
>
<
br
>
<
div
class
=
"container-fluid"
>
<
div
class
=
"access"
aria-hidden
=
"false"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
b
>
A Computer Science portal for Geeks
</
b
>
</
div
>
</
div
>
<
script
>
$(document).ready(function() {
$('button').click(function() {
/*Check and alternate attribute's value,
then show/hide accordingly using chaining. */
if ($('.access')
.attr('aria-hidden') == 'true')
$('.access')
.attr('aria-hidden', 'false')
.show('fast');
else
$('.access')
.attr('aria-hidden', 'true')
.hide('slow');
// Display changed attribute's value
$('#answer')
.text($('.access')
.attr('aria-hidden'));
});
});
</
script
>
</
body
>
</
html
>