anki - HTML - JAVA hint's won't allow me to enter a new line

Question

I'm using anki and I'm trying to insert "hints" and explantions. I took a code from this guy on youtube who created just that - the possibility of clicking on a hint symbol that will only then display the content of the hint. That's the link to the video - https://www.youtube.com/watch?v=Hv0IxQSYZiM That is the code he wrote that I insert to Anki - http://pastebin.com/raw/tqWNkeHV

The problem I have is that I've got hint's that have mulitple lines / images in them, and this method won't allow me to show them in a good way. The code will only receive the first line in the "hint" category, and won't hide the rest of the content. It looks like this -

Example

Here is the current code -

{{Question}}


{{#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}}

And HERE IS THE 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; }

Can anyone help me modify the JAVA / HTML code so I can insert all lines into the hints section? Thank you very much.

Answer 1

In the third line of {{#Hint}} section, you must change from:

'<p class="payload">{{Hint}}</p>'

to:

'<pre class="payload">{{Hint}}</pre>'