I have implemented hints on some kanji cards but the hint does not always display correctly
I got the code from this utube vid
How to add hints to Anki cards - YouTube
this hide and display works fine when the payload is normal text
but
when I have a field {{hint}} the text for that field is displayed on the screen
prior to the the click event (see the pic)
Front Template
{{#Hint}}
<div id="hint" class="hidden ; class="hidden">
<p class="trigger">[ click to show hint ]</p>
<p class="payload" > {{edit:Hint}} </p>
</div>
<script>
var hint = document.getElementById('hint');
hint.addEventListener('click', function() {this.setAttribute('class', 'shown') });
</script>
{{/Hint}}
<!-
alternative payload of normal text
-<p class="payload" > normal text is hidden then displayed on click </p>
-->
Styling
#hint.hidden:hover { color: #000; cursor: pointer; }
#hint.hidden .payload {display: none ; background-color: #000; }
#hint.hidden .payload2 { display: none }
#hint.shown { background:fff ; color: #000; }
#hint.shown .trigger { display: none;color: #fff; }
#hint.shown .payload { display: block; }
note: the edit: functionality works fine and it makes no difference if it’s include or not