Make element not appear if specific fields are empty

Anki Card Design
1

QUESTION

I want to know how to make an element not appear if specific fields are empty.

I think I might be able to do this with the coding I know about. I would like to know if there might be a shorter way to do this than the lengthy way I describe below. If the lengthy way below you don’t think will work, please advise me on some other method, if there is any.

POSSIBLE WAY

There is a way that might work, but the problem is that the method could get exceedingly long if more fields are involved.

Here is an example of this proposed method. In this case, I want an element :

ELEMENT

: to not appear if the following fields are empty:

{{field 1}}, {{field 2}}, and {{field 3}}

Using the Conditional Replacement coding I could achieve this, I think, if I described all possible combinations where at least one field contained something, and link that with the appearance of :

ELEMENT

So that when all the specified fields are empty, the element :

ELEMENT

: does not appear.

POSSIBLE WAY CODING

This is my idea for the coding required to make this work :

<! when all 3 fields have text >
{{#field 1}}
    {{#field 2}}
        {{#field 3}}
            ELEMENT WILL APPEAR
        {{/field 3}}
    {{/field 2}}
{{/field 1}}

<! when 2 of 3 fields have text, all combos : >

<! - field 1 is empty >
{{^field 1}}
    {{#field 2}}
        {{#field 3}}
            ELEMENT WILL APPEAR
        {{/field 3}}
    {{/field 2}}
{{/field 1}}

<! - field 2 is empty >
{{^field 2}}
    {{#field 1}}
        {{#field 3}}
            ELEMENT WILL APPEAR
        {{/field 3}}
    {{/field 1}}
{{/field 2}}

<! – field 3 is empty >
{{^field 3}}
    {{#field 1}}
        {{#field 2}}
            ELEMENT WILL APPEAR
        {{/field 2}}
    {{/field 1}}
{{/field 3}}

<! when 1 of 3 fields have text, all combos : >

<! - field 1 and 2 are empty >
{{^field 1}}
    {{^field 2}}
        {{#field 3}}
            ELEMENT WILL APPEAR
        {{/field 3}}
    {{/field 2}}
{{/field 1}}

<! - field 1 and 3 are empty >
{{^field 1}}
    {{^field 3}}
        {{#field 2}}
            ELEMENT WILL APPEAR
        {{/field 2}}
    {{/field 3}}
{{/field 1}}

<! - field 2 and 3 are empty >
{{^field 2}}
    {{^field 3}}
        {{#field 1}}
            ELEMENT WILL APPEAR
        {{/field 1}}
    {{/field 3}}
{{/field 2}}

<! and finally, the coding to make the element appear if all fields are empty : >

<! all fields are empty >
{{^field 1}}
    {{^field 2}}
        {{^field 3}}
            ELEMENT WILL APPEAR
        {{/field 3}}
    {{/field 2}}
{{/field 1}}

<! is not included in the coding for the card, meaning that when the specified fields are empty, ELEMENT will not appear because the coding for it to do so is absent >
2

Hide it, but display if any have content:

<div id='theElement' style="display: none;">ELEMENT</div>
<script>
theElement = document.getElementById('theElement');
{{#field1}}theElement.style.display = 'block';{{/field1}}
{{#field2}}theElement.style.display = 'block';{{/field2}}
{{#field3}}theElement.style.display = 'block';{{/field3}}
</script>
1 Like
3

Or the inverse approach, display it but hide if all are empty:

<div id='theElement'>ELEMENT</div>
{{^field1}}{{^field2}}{{^field3}}
<style>
  #theElement { display: none; }
</style>
{{/field1}}{{/field2}}{{/field3}}
1 Like
4

Thank you for the responses.

INVERSE APPROACH
DISPLAY IT BUT HIDE IF ALL ARE EMPTY

I will start with this approach first. I have gotten this to work. I just had to make an adjustment though.

snoyes coding suggestion :

<div id='theElement'>ELEMENT</div>
{{^field1}}{{^field2}}{{^field3}}
<style>
  #theElement { display: none; }
</style>
{{/field1}}{{/field2}}{{/field3}}

I think that the order of the fields has to be reversed in the closing line :

<div id='theElement'>ELEMENT</div>
{{^field1}}{{^field2}}{{^field3}}
<style>
  #theElement { display: none; }
</style>
{{/field3}}{{/field2}}{{/field1}}

So that you have this pattern happening :

1 2 3
3 2 1

INITIAL APPROACH
HIDE IT BUT DISPLAY IF ANY HAVE CONTENT

<div id='theElement' style="display: none;">ELEMENT</div>
<script>
theElement = document.getElementById('theElement');
{{#field1}}theElement.style.display = 'block';{{/field1}}
{{#field2}}theElement.style.display = 'block';{{/field2}}
{{#field3}}theElement.style.display = 'block';{{/field3}}
</script>

I tried this as well but only seem to have gotten it to work partially.

I suppose I could do what I need to do with my Anki decks with the inverse approach. But I would still like to know how to make the initial approach work. It might be good for any possible Forum readers to know what is going on as well.

I created experiment decks to try out the two coding approaches. What happened with the initial approach, to hide the element and display if any fields have content, is that of the two elements that were to display if any fields had content, only the first element did as it was supposed to. The second element never displayed.

The difference between the aformentioned two elements in the coding was that :

  • the first element that worked as it should, it occurred prior to the divs with the relevant fields
  • the second element which never appeared, it occurred after the divs with the relevant fields. In fact, placing that element only after one div with relevant fields caused it to not work properly.

Am I applying the coding correctly?

MY CODING FOR “HIDE ELEMENT BUT DISPLAY IT IF ANY FIELD HAS CONTENT” WHICH ISN’T WORKING FOR ME :

  <!================================================
    BACK CARD FOR: HIDE ELEMENT BUT DISPLAY IT IF ANY FIELD HAS CONTENT
    =================================================>

<!DOCTYPE html>
<html>

<head>
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
</head>
   
<body>

<!------------------------------------------------------------------------------------------------------>

<!__________________________________________________
     
    BACK CARD  LANDSCAPE VIEW
___________________________________________________>

<!------------------------------------------------------------------------------------------------------>
<! div 1 . . . >
     <div class= "port" >
<!------------------------------------------------------------------------------------------------------>

<! Hide the element, but display it if any fields have content. 

APPEAR is the id name for the ID Attribute. This can be any text. I don't know about other characters. 

In this case you just want to get the two violet lines to disappear if all fields are empty. The div's disappear as per their contained field containing content or not. 

THE PROBLEM WITH THIS CODING IS THAT THE SECOND VIOLET LINE NEVER APPEARS. THE FIRST VIOLET LINE DOES WHAT IT'S SUPPOSED TO, IT APPEARS IF ANY FIELD HAS CONTENT AND DISAPPEARS IF NONE OF THE FIELDS HAVE CONTENT.>

 <! space >

<div style= "height: 5vw;" class= "port " ></div>

   <! violet line 
THIS WILL APPEAR IF ANY FIELDS HAVE CONTENT >

<div id= 'APPEAR' style="display: none;">
<div style= "height: .8vw;" class= "bgviolet" ></div>
</div>

<! THE THREE DIVS WITH THE RELEVANT FIELDS>

{{#field 1}}
<div style= " font-family: segl; font-size: 6vw; text-align: center; padding: .2vw 0vw .45vw 0vw;" class= "grey45 segl"> {{field 1}} </div>
{{/field 1}}

{{#field 2}}
<div style= " font-family: segl; font-size: 6vw; text-align: center; padding: .2vw 0vw .45vw 0vw;" class= "grey45 segl"> {{field 2}} </div>
{{/field 2}}

{{#field 3}}
<div style= " font-family: segl; font-size: 6vw; text-align: center; padding: .2vw 0vw .45vw 0vw;" class= "grey45 segl"> {{field 3}} </div>
{{/field 3}}


   <! violet line 
THIS WILL APPEAR IF ANY FIELDS HAVE CONTENT 
This second violet line however will not appear no matter whether the fields have content or not. >

<div id= 'APPEAR' style="display: none;" >
<div style= "height: .8vw;" class= "bgviolet" ></div>
</div>

<! space >
<div style= "height: 1vw;" class= "port " ></div>

<!------------------------------------------------------------------------------------------------------>
     </div>
<! . . . div 1 >
<!------------------------------------------------------------------------------------------------------>

<script>
APPEAR = document.getElementById('APPEAR'); 
{{#field 1}}APPEAR.style.display = 'block';{{/field 1}}
{{#field 2}}APPEAR.style.display = 'block';{{/field 2}}
{{#field 3}}APPEAR.style.display = 'block';{{/field 3}}
</script>

<!------------------------------------------------------------------------------------------------------>
</body>
</html>
<!__________________________________________________>


<!__________________________________________________>
<!__________________________________________________>

MY CODING FOR “DISPLAY ELEMENT BUT HIDE IT IF ALL FIELDS ARE EMPTY” WHICH IS WORKING FOR ME :

<!================================================
BACK CARD FOR: DISPLAY ELEMENT BUT HIDE IF ALL FIELDS ARE EMPTY
=================================================>

<!DOCTYPE html>
<html>

<head>
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
</head>
   
<body>

<!------------------------------------------------------------------------------------------------------>

<!__________________________________________________
     
    BACK CARD  LANDSCAPE VIEW
___________________________________________________>

<!------------------------------------------------------------------------------------------------------>
<! div 1 . . . >
     <div class= "port" >
<!------------------------------------------------------------------------------------------------------>

<! Display the element, but hide it if all fields are empty. 

DISAPPEAR is the id name for the ID Attribute. This can be any text. I don't know about other characters. 

In this case you just want to get the two violet lines to DISAPPEAR if all fields are empty. The div's DISAPPEAR as per their contained field containing content or not. >


    {{^field 1}}{{^field 2}}{{^field 3}}
    <style>
       #DISAPPEAR { display: none; }
    </style>
    {{/field 3}}{{/field 2}}{{/field 1}}

 <! space >
<div style= "height: 5vw;" class= "port " ></div>

   <! violet line 
THIS WILL NOT APPEAR IF ALL FIELDS ARE EMPTY >

<div id='DISAPPEAR'>
<div style= "height: .8vw;" class= "bgviolet" ></div>
</div>

<! THE THREE DIVS WITH THE RELEVANT FIELDS>

{{#field 1}}
<div style= " font-family: segl; font-size: 6vw; text-align: center; padding: .2vw 0vw .45vw 0vw;" class= "grey45 segl"> {{field 1}} </div>
{{/field 1}}

{{#field 2}}
<div style= " font-family: segl; font-size: 6vw; text-align: center; padding: .2vw 0vw .45vw 0vw;" class= "grey45 segl"> {{field 2}} </div>
{{/field 2}}

{{#field 3}}
<div style= " font-family: segl; font-size: 6vw; text-align: center; padding: .2vw 0vw .45vw 0vw;" class= "grey45 segl"> {{field 3}} </div>
{{/field 3}}


   <! violet line 
THIS WILL NOT APPEAR IF ALL FIELDS ARE EMPTY >

<div id='DISAPPEAR'>
<div style= "height: .8vw;" class= "bgviolet" ></div>
</div>

<! space >
<div style= "height: 1vw;" class= "port " ></div>

<!------------------------------------------------------------------------------------------------------>
     </div>
<! . . . div 1 >
<!------------------------------------------------------------------------------------------------------>

<!------------------------------------------------------------------------------------------------------>
</body>
</html>
<!__________________________________________________>

<!__________________________________________________>
<!__________________________________________________>

I’m also appending to this comment the Anki .apkg files for these two experiment decks if that will help. Oh, it looks like I can’t append .apkg files.

If you think it would be helpful, I could also append the MS Word files containing the coding for the front and back cards as well as the styling card. I do my coding in MS Word files (which seems to work provided you do the coding a certain way) and I color code the coding in my own way which helps to make it be more easily made out.

5

I have a new problem.

Using the “display but hide if none of the fields have content” approach as was outlined earlier :

<div id='theElement'>ELEMENT</div>
{{^field1}}{{^field2}}{{^field3}}
<style>
  #theElement { display: none; }
</style>
{{/field3}}{{/field2}}{{/field1}}

: I tried applying the technique in such a way that I set up three conditions and not just one, as follows :

{{definitions}} {{info bk}} {{correction needed}} {{notes}} {{more examples}} {{rating}}
<style>
#disappear1 {display: none;}
</style>
{{rating}} {{more examples}} {{notes}} {{correction needed}} {{info bk}} {{definitions}}

{{heading fr}} {{word desc fr}} {{word fr}} {{detail fr}} {{phrase fr}} {{sentence fr}} {{Q&A fr}} {{info fr}}
<style>
#disappear2 {display: none;}
</style>
{{info fr}} {{Q&A fr}} {{sentence fr}} {{phrase fr}} {{detail fr}} {{word fr}} {{word desc fr}} {{heading fr}}

{{word desc bk}} {{word bk}} {{detail bk}} {{phrase bk}} {{sentence bk}} {{definitions}} {{Q&A bk}} {{info bk}}
<style>
#disappear3 {display: none;}
</style>
{{info bk}} {{Q&A bk}} {{definitions}} {{sentence bk}} {{phrase bk}} {{detail bk}} {{word bk}} {{word desc bk}}

This didn’t work. The first condition of disappear1 worked as it should. Disappear2 and disappear3 went overkill and made their dependent elements always not appear.

I thought to put a colon between the condition coding thinking that lack of division between the coding sections might be causing problems. The addition of colons didn’t help any.

My post prior to this one is also a so far unanswered question.