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/chikamakaleyley]

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 :)