anki furi toggle

anki template.js

//CSS
.card{
font-family: arial;
text-align: center;
font-size: 50px; 
}

#type-box *{
 display: inline-block;
 text-align: center;
}

tts {display: none;}

body, .night_mode{
 background-color: #202020 !important;

}

.card a{
 background-color: #202020 !important;
 text-decoration: none;
 font-size: 50px;
 color: #FFFFFF;
}

.audio {
 font-family: Arial; 
 font-size: 44px;
 display: inline;
}

.light{
 color: #FAFAFA;
}

.big *{
 font-size: 50px !important;
}

.small{
 font-size: 22px !important;
}
.hint{
  font-size: 22px !important;
 text-decoration: underline !important;
}

div [id^=hint] {
 font-size: 50px !important;
 text-decoration: none!important; 
}

.hidden {
  display: none;
}

// BACK
{{FrontSide}}

<hr id=answer>

<span class="reading" style=>
  <a href="http://jisho.org/search/{{kanji:Expression}}">
    <span id="expression-content">{{Expression}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</span>

<div class="tts">{{Audio}}</div>

<script>
  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function (e) {
    if (reading.innerText !== expression.innerText && !clicked) {
      e.preventDefault();
      e.stopPropagation();
      clicked = true;
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
    }
  });
</script>