Field hide/show option in answer view

Card Design
1

How to toggle on and off a field in the answer window on both phone and PC? Any CSS styling? Add on? Thank you.
ThanksMickeyMouseGIF

2

While I appreciate your enthusiasm, please avoid posting such images. It makes it quite hard to read the actual question :joy:

Besides that, could you be more specific about what do you mean by “toggling off a field in the answer window”? If I understand you correctly, while you are reviewing, once you have shown the answer, you want to be able to click on a button to toggle visibility of some text?

1 Like
3

I have four fields:
image
I add proofs of theorems in “extra” field, but I often don’t want to see the proof in the answer window but sometimes I do want to see it. I want a button so that by clicking it a field’s content’s visibility gets toggled on and off in the answer window. :blush:

4

I had something like that in a deck I created, and I kept all the styling and scripts in Asset Manager (it makes things easier), but it’s not required.

First off, there is a generic snippet I made you can ship in any template to create such toggle field. Beware that I only had one button / field to toggle in mind, so it won’t scale as-is. Also, it injects some styling for the button (largely inspired by a button I found on a Mozilla webpage). If you don’t like you can remove everything between the Generic Button comments. You need to add this to your back template at the bottom.

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

If you have something in the Extra field, it will show a button. Clicking on that button will toggle visibility of the proof. Note that, as is, the button is under the proof. When the proof becomes visible, the button will be pushed at the bottom of the page, which may be outside of the currently visible section of the page, so you may need to scroll to hide it again (depending on the length of your proof). If you want the button to be always visible to hide right away, you can move the button out of the footer tag up above the div#proof tag.

2 Likes
5

Thank you for your answer. I got sick and forgot about the forum; could not reply back. Thank you again. Happy day. :innocent: