SOLVED: I managed to solve this issue with this code:
function toggleActions() {
event.target.nextElementSibling.classList.toggle("showActions");
};
ORIGINAL: I cannot determine why this function targeting an adjacent sibling of an onclick element will not work. It returns an 'undefined' error.
function toggleActions(e) {
e.target.nextElementSibling.classList.toggle("showActions");
};
.actions {
display: none;
}
.showActions {
display: block!important;
}
<div class="row">
<div class="link">Some text</div>
<div class="actionsLink" onclick="toggleActions();">toggle</div>
<div class="actions">Show on toggle</div>
</div>
<div class="row">
<div class="link">Some text</div>
<div class="actionsLink" onclick="toggleActions();">toggle</div>
<div class="actions">Show on toggle</div>
</div>
<div class="row">
<div class="link">Some text</div>
<div class="actionsLink" onclick="toggleActions();">toggle</div>
<div class="actions">Show on toggle</div>
</div>