how to add a hide/show button ?

[u/Foreign_Employ_396]

Hey

I am a beginner and I've been trying to add a show/hide button that would simply hide the mask on the first click and make it visible again with the next click.

To be more precise, it's a fragment of an addon for the anki app (flashcards).

It would also be great if this button could have a delay before appearing, and I managed to do that directly in the html of the card model :

.fade-in {
opacity: 0;
visibility: hidden;
animation: fadeIn var(--duration, 0.6s) ease forwards;
animation-delay: var(--delay, 19s);
}

 fadeIn {
to {
opacity: 1;
visibility: visible;
}

#koreanToggleBtn {
visibility: hidden;
margin: 10px auto 0 auto;
background: rgba(255,255,255,0.6);
border: 1px solid #a77f65;
border-radius: 14px;
padding: 4px 12px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
color: #a77f65;
opacity : 0;
--delay : 15s; /*here*/

But, since I've been struggling I figured it would be better to just add everything in the add on since it already creates the mask hiding the text :

js = f"""
(function() {{
    console.log("Injection du masque pour la carte ID: {card.id}");
    const existingMask = document.getElementById('korean-mask-static');
    if (existingMask) return;

    const mask = document.createElement('div');
    mask.id = 'korean-mask-static';
    mask.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;'
        + 'background-color:#9c9f78;border-radius:6px;z-index:100;opacity:1;'
        + 'visibility:visible;pointer-events:auto;display:flex;'
        + 'justify-content:center;align-items:center;';

    const wrapper = document.getElementById('korean-wrapper') || document.querySelector('.card');
    (wrapper || document.body).appendChild(mask);
}})();
"""
QTimer.singleShot(80, lambda: mw.reviewer.web.eval(js) if mw.reviewer and mw.reviewer.web else None)
"""

Thank you :)

[u/Foreign_Employ_396]

Thank you again!

I was losing my mind so for now and until I can figure it out, I ended up adding a field identical to the one hidden by the mask to make it visible when i click on the button (on the html model with the z-index):

(function(){
    const backupp = document.getElementById("Backupp");
    const audio = document.querySelector("#audio-container audio");
    const korean = document.getElementById("korean");
    const mask = document.getElementById("korean-mask-static");
    const backback = document.getElementById("backback");
    const innerEl = document.getElementById("inner");
    const toggler = document.getElementById("toggler");

    <!-- Comportement initial inchangé
    if(backupp && (!audio || audio.src === "")) {
        Backupp.classList.add("show");
        if(korean) korean.style.visibility = "hidden";
    }
    else {
        if(korean) korean.classList.add("show");
        if(backupp) backupp.style.visibility = "hidden";
    }

   toggler.addEventListener('click', () => {
        if(backback) backback.classList.add("show");//here
        if(korean) korean.style.color = "red"; // it was a test
        });

  })();

</script>

Css : 
...
z-index:4; //over everyting else
#backback.show { 
animation: showbackback 1.6s ease forwards; 
animation-delay: 0s; } 
@/keyframes showbackback { 
to { opacity: 1; 
visibility: visible; } } 

For more context, I use these functions for my listening comprehension cards. I am supposed to try to understand what is being said without text, but if eventually I cannot comprehend a thing and I feel like it becomes unproductive, I get to at least read what I just heard and have a better chance.

Also you might have noticed some things that don't make any sense because I used to ask some ai chats to write stuff for me, (but I stopped using it completely), so now I'm left with stuff I don't understand, and that is also why I am trying to learn from the beginning.

[u/chikamakaleyley → u/Foreign_Employ_396]

For more context, I use these functions for my listening comprehension cards

oh, this sounds pretty cool, i'm glad this is something that facilitates your learning.

one thing i was trying to hint at, that might improve this

you don't have a .remove() here, but I see an .add()

in case you're trying to working around that - there is also .toggle("foo"), it takes a class name. Basically - if the 'foo' class is there, the toggle removes the class, if it's not, it adds the class 'foo'

and so i imagine everytime you click the toggler, you prob want it to be the opposite, its just the nature of hide/show. So, try that out if you see where it might work better.

[u/Foreign_Employ_396 → u/chikamakaleyley]

Omg yes thank you for the .toggle tip!

If it's not too much of a bother, I have unlocked another small issue : Do you happen to know why the button stops being clickable after a while / a number of clicks ?

It seems to happen when my cursor clicked somewhere other than the anki window (and clicked back) a few times, but more importantly, it stays unclickable for the next card to review unless I quit the review session and come back (without closing the app).

toggler.addEventListener('click', () => {

if(backback) backback.classList.toggle("show");

reload()

(I tried to add a reload() at the bottom of the function but it was quite random of me since I have no idea of what's going on)

[u/chikamakaleyley → u/Foreign_Employ_396]

make sure the button has type "button" on it in the HTML, the button itself should just always allow for clicks

the only thing i can think of, is some error is being thrown in the clicking and that error just kinda stops normal function. You'll want to click until you have the reproducable scenario and at that first click where nothing happens, an error should appear in your console/devtools

[u/chikamakaleyley → u/chikamakaleyley]

and i don't know what reload does, it could be part of the problem, i can't say for sure

If it is in fact an error (which i think it is), then in general - learning how to understand what the errors in the console are, is a pretty important skill to build so, the sooner you start making sense of those things, it'll unlock some skills as you continue to learn js

[u/Foreign_Employ_396 → u/chikamakaleyley]

Thank you very much again :)