Help with Ankidroid

A friend of us , Blackbean posted following script

<script>
  function toggleProof() {
    var proof = document.getElementById("proof");
    var proofbutton = document.getElementById("proofbutton");
    if (proofbutton === null || proof === null) {
      return;
    }
    if (proof.style.display === "none") {
      proof.style.display = "inline-block";
      proofbutton.innerHTML = "Hide the proof";
    } else {
      proof.style.display = "none";
      proofbutton.innerHTML = "Show the proof";
    }
  }

  var proofbutton = document.getElementById("proofbutton");

  if (proofbutton !== null) {
    proofbutton.addEventListener("click", toggleProof);
    document.addEventListener("keydown", function (event) {
      if (event.key === "p") {
        toggleProof()
      }
    });
    toggleProof();
  }

  var style = document.createElement("style");
  style.innerHTML = `
    /* BEGIN of Generic button */
    .button {
      text-decoration: none;
      user-select: none;
      height: 36px;
      background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
      border: none;
      border-radius: 5px;
      position: relative;
      border-bottom: 4px solid #2b8bc6;
      color: #fbfbfb;
      font-weight: 600;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
      text-align: left;
      text-indent: 10px;
      box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2);
      cursor: pointer;
      font-size: 25px;

      display: inline-block;
      margin: 0 auto;
      margin-bottom: 20px;
      padding-right: 40px;
    }

    .button:hover {
      background: linear-gradient(to bottom, #58bfef 0%, #42a9df 100%);
    }

    .button:active {
      box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, .2);
      top: 2px;
    }

    .button::after {
      content: "";
      width: 0;
      height: 0;
      display: block;
      border-top: 18px solid #187dbc;
      border-bottom: 18px solid #187dbc;
      border-left: 16px solid transparent;
      border-right: 20px solid #187dbc;
      position: absolute;
      opacity: 0.6; 
      right: 0;
      top: 0;
      border-radius: 0 5px 5px 0;  
    }

    /* END of Generic button*/

    #proof {
      display: none;
      text-align: left;
      // margin: 0px auto;
      line-height: 1.2;
      border: 2px solid #000;
      border-radius: 10px;
      background-color: #f0f0f0;	
      border-color: #ccc;
      padding-left: .6em;
      padding-right: .6em;
      padding-top: .2em;
      padding-bottom: .6em;
    }
  `;
  document.head.appendChild(style);
</script>

Next there is the actual field setup, I did something like

{{#Extra}}
<div id="proof">{{Extra}}</div>

<footer>
<a id=proofbutton class=button href="#" />
</footer>
{{/Extra}}


I have been using this script on my laptop ( Mac latest version ) Anki ( latest version ) setup. however this script isn't working on ankidroid ( Anki for android ) 
how to make this available on Anki droid ?

[Reference to original post](https://forums.ankiweb.net/t/field-hide-show-option-in-answer-view/21144)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.