How to add hints to Anki cards

FRONT TEMPLATE
==============

{{Front}}

{{#Hint}}
    <div id="hint" class="hidden">
        <p class="trigger">[ click to show hint ]</p>
        <p class="payload">{{Hint}}</p>
    </div>
    <script>
        var hint = document.getElementById('hint');
        hint.addEventListener('click', function() { this.setAttribute('class', 'shown'); });
    </script>
{{/Hint}}



STYLING
=======

.card { font: 1.5em/1.5 sans-serif; text-align: center; }

#hint { background: #f2fbe7; border: 1px solid #dff5c4; border-radius: 6px; color: #7a876b; }

#hint.hidden:hover { background: #dff5c4; color: #000; cursor: pointer; }
#hint.hidden .payload { display: none; }

#hint.shown { background: #fff; color: #000; }
#hint.shown .trigger { display: none; }
#hint.shown .payload { display: block; }



BACK TEMPLATE
=============

{{Front}}

{{#Hint}}<p>{{Hint}}</p>{{/Hint}}

<hr>

{{Back}}