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)