Working with links, buttons, ...

Expanding a text/image when clicking a link

This function returns a html-text with a link that, when clicked, toggles visibility of a div-section containing descriptive text.
This is done by toggling the hidden-attribute of the div.
window.gm.printItem= function( id,descr){
var elmt ="<a0 id='${id}' onclick='(function($event){document.querySelector(\"div#${id}\").toggleAttribute(\"hidden\");})(this);'>${id}</a>";
elmt +="</br><div hidden id='${id}'>${descr}</div>";
return(elmt);
};

Show some text/img when clicking on an element

Think of a shop: there are alot of products on the page symbolized by icons. When the player clicks on it a text should appear because it would take to much space to show all text at once. Create html:
Notice that the paragraphs in info div are all set to hidden and that their id matches the images <div id="choice">
<p>click on image to show related text and border</p>
<table><tbody>
<tr>
<td><img id="1" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
<td><img id="2" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
</tr>
<tr>
<td><img id="3" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
</tr>
</tbody></table>
</div>
<div id="info">
<p id="1" hidden>Text 1</p><p id="2" hidden>[[Start]]</p><p id="3" hidden>Text 3</p>
</div>

In css:
This will be shown to mark the image as selected
.selected { border-style: double; border-width: thick; /* border-spacing: 20px; */ border-color: coral; }

in js:
this will assign the selected-style and toggle hidden-attribute
window.gm.onSelect = function(elmnt,ex_choice,ex_info) {
var all = $(ex_choice);
for(var i=0;i<all.length;i++) {
if(all[i].id === elmnt.id) {
all[i].classList.add("selected");
}
else all[i].classList.remove("selected");
}
all = $(ex_info)[0].children;
for(var i=0;i<all.length;i++) {
if(all[i].id === elmnt.id) {
all[i].hidden=false;
}
else all[i].hidden=true;
}
};