Working with links, buttons, ...

executing an action before passage change

If you want to run some code before switching to another passage you should use a normal link instead of a passage-link and call the code in onclick before running window.story.show. This can also be handy if you want to randomly select the next passage to go to.
Note that sometimes you have to wrap the code into a functiondeclaration,call it and surround this call in additional parenthesis ('(function(){...}()') ).
<a0 onclick='(function(){window.story.state.Kor.upMouth+=1;window.story.show("downgrade_Done");}())'>Choose this icon</a>

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;
}
};

dropdown-box (static)

See HTML-code below how to create a dropdown-box by using a select-element with a number if options. See how the options textlabel or id-value is read in the onchange-Handler. You can also preselct an option with selected (this will not trigger the onchange-event):
<label>static dropdown:
<select id="person" onchange='selectperson(this)'>
<option value="23">Albers, Alfred</option>
<option value="24" selected>Braun, Berta</option>
<option value="25">Zeta, Bort</option>
</select>
</label>
<div id='output'></div>
<script>
function selectperson(elmnt) {
var menu = document.getElementById(elmnt.id);
document.querySelector('div#output').innerHTML = menu.value +""+menu.options[menu.selectedIndex].label+" "+menu.options[menu.selectedIndex].value;' } </script>`

dropdown-box (dynamic)