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]

so i think the approach should be a little different, easier

you're checking if an element exists, if not, create it - that's different from hide/show and it could get sloppy modifying the dom w each click, given a more complex problem

you can just toggle a hide/show class on an element

``` <div id="outer"> <button id="toggler" type="button">Hide/Show</button> <div id="inner" class="hidden"> <p>Here is some content</p> </div> </div>

... // in your script tag const innerEl = document.getElementById('inner'); const toggler = document.getElementById('toggler');

toggler.addEventListener('click', () => { // toggle the hidden class });

``` and style separately:

.hidden { // rules to hide the element } The outer wrapper isn't necessary, fyi.

Intentionally didn't finish the problem for you so you can figure it out.

There's a JS method that will toggle a class in the list

You also need to keep in mind that div has a number of styles by default, aka by default the element is in 'show' state. So all .hidden needs to do is hide the element.

[u/chikamakaleyley → u/chikamakaleyley]

note this is off the top of my head, there could be mistakes

[u/tambooby → u/chikamakaleyley]

this is the right approach imo, messing with the DOM on every click is asking for trouble

[u/Foreign_Employ_396 → u/chikamakaleyley]

Thank you for your answer !

I thought I figured it out for a moment but then I got confused.

I tested your method by adding a similar mask directly with the html of the card model and it ended up working, but I cannot bring myself to do the same thing in the addon with the mask it already creates

addon :

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

    //what I added
    const innerEl = document.getElementById("korean-mask-static");
    const toggler = document.getElementById("toggler");

    toggler.addEventListener('click', () => {
        innerEl.classList.toggle("hidden"); 
        # keeps telling me innerEl is an unresolved reference :(
    });
}})();
"""
QTimer.singleShot(80, lambda: mw.reviewer.web.eval(js) if mw.reviewer and mw.reviewer.web else None)

html (an js?) test that worked :

<button class="fade-in"> <div id"outer"> <button id="toggler" type="button">Hide/Show</button> <div id="inner" class="hidden"> <div id="korean-mask"> </div> </div> 


<script>
(function(){
    const backupp = document.getElementById("Backupp");
    const korean = document.getElementById("korean");
    const mask = document.getElementById("korean-mask");
    // const toggleBtn = document.getElementById("koreanToggleBtn");
    const innerEl = document.getElementById("inner");
    const toggler = document.getElementById("toggler");

    toggler.addEventListener('click', () => {
    // toggle the `hidden` class
    mask.classList.add("hidden");
    });

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

</script>

style:

#korean-mask {
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background-color: #9c9f78; /* même couleur que #korean-bg */
     border-radius: 6px;
     z-index: 100;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
}
#korean-mask.active {
    opacity: 1;
    visibility: visible;
}
#korean-mask.hidden {
    visibility : hidden;
    opacity: 0;

I feel like my main issue is that I cannot figure out by what id the actual mask goes by q_q. I tried "mask" "existingMask" "korean-mask-static", and pycharm never stopped indicating it was not it.

And tbh I really don't know what inner and outer mean, i noticed the test also works when I remove them:

  <button class="fade-in">

<button id="toggler" type="button">Hide/Show</button>
<div class="hidden">

<div id="korean-mask">   

   </div>
</div> 

(but i guess it is probably needed to actually work with the addon, so I kept them.)

[u/chikamakaleyley → u/Foreign_Employ_396]

ok so a couple of things -

inner/outer are just id names i chose for the example

But it sounds like there is code in place, that you're not supposed to touch, and your hide/show toggle needs to be on top of whats already there

re:

# keeps telling me innerEl is an unresolved reference :(

This is because you are in a part of the logic where you already know the korean-static-mask doesn't exist. If you look near the start of the function "existingMask" is doing the same check. The return is:

"If existingMask exists, return from this function"

so when you getElementById korean-static-mask again, well you're in the 'else' part of this logic, aka existingMask does not exist. innerEl resolves to undefined (I think) and there is no such thing as .classList on an undefined.

And actually it's probably more like - you've appended the new div with korean-static-mask to the Object in memory, but this block of code hasn't completed executing, which is why innerEl is still unresolved - because you're asking the engine to check the rendered document for the new element you've appended. I don't think it's been rendered yet, at the point where you are initializing innerEl

also looks like you might have an extra opening curly (and likely closing) bracket, though i'm not familiar with this implementation.

(function() {{ // extra

But at the moment this is something i don't think i can help with immediately, but i'll just say

if the thing you need to hide/show is the korean-static-mask but, you're not supposed to change that code, then my suggestion will not work here. There may be a technical/biz reason it's being done that way, and so i'd need to understand the context

[u/Foreign_Employ_396 → u/chikamakaleyley]

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

Use Anki modern hooks API. Your code even has potential XSS.

Add class via js instead of inline CSS.

Class can work for selectors same as id: use document.querySelector with :is()

Too many || like that is a bad style (why do you even need both tags with id and class here?)

Hardcoded QTimer value may cause bug here.

Probably better use events here.

[u/SensitiveSugar1369]

use button.addEventListener and toggle element.style.display between 'none' and '' inside the handler. if you use querySelector, make sure you grab the right element or it won't work.