<!DOCTYPE html>
<title>Test</title>
<style type="text/css">
* [aria-hidden="true"] {
display : none;
}
* [aria-selected] {
cursor : pointer;
text-decoration: underline;
}
* [role="topic_title"] {
color:red;
}
</style>
<div class="news">
<p role="topic_title" aria-selected="false">記事1</p>
<p role="topic_text">記事1の内容</p>
<p role="topic_text">記事1-2の内容</p>
</div>
<div class="news">
<p role="topic_title" aria-selected="false">記事2</p>
<p role="topic_text">記事2の内容</p>
</div>
<script>
function disp (n) {
Array.forEach (n.parentNode.querySelectorAll ('* [role="topic_text"]'),
function (target) { target.setAttribute (this.attr, this.state); },
{ attr: 'aria-hidden', state: String (n.getAttribute ('aria-selected') === 'false')});};
document.addEventListener ('click', function (evt) {
var node = evt.target;
if ('topic_title' === node.getAttribute ('role')) {
node.setAttribute (
'aria-selected', String (node.getAttribute ('aria-selected') === 'false'));
disp (node);
}
}, false );
Array.forEach (document.querySelectorAll ('* [role="topic_title"]'), disp);
</script>
