How to get extra fields on back of card to open automatically?

Anki Help
1

Hi,

I recently downloaded a deck called Ankoma. There are several fields on the back of each card that contain extra info if I click on them. For example, every card has a citation section. If I click the citation field, it opens to display text stating where the info came from. There is also a section for personal notes. I would like this section to open automatically when I see the back side of a card, rather than having to click it every time to have it open. I know that the AnKing deck has an add on that allows you to do this, but I’m not sure if it’s easily achievable since the Ankoma deck uses different note types.

Thanks!

2

It should be simple. You will have to look at the style of your cards to see the HTML and how the deck designer is enabling the display or hide actions. There are several ways to do it, so we need to see how it is working before we advise.

See this manual page, i.a.

For a start, you can do the following.

  1. Click on Browse on the top menu of the home screen (on the main, computer application).
  2. In the left-most panel, under Decks, click on the deck concerned (‘Ankoma’, you said).
  3. The first card should be selected in the centre panel.
  4. Click on the Cards… button on the right-most panel.
  5. You will need to send us a copy of the text for the Front Template, Back Template and Styling.
  6. You may need to do that for any cards numbered greater than 1, if you have reverse cards or more than one card being created from a single note.
  7. The HTML in the Back template is presumably working in concert with presentation information in the Styling pane to produce the effect you define.
3

Hi,

Front Template:

<div style='font-family: "Arial"; font-size: 25px;'>

<div class="cloze-text">
    {{cloze:Text}}
</div>

<style>
img {
    max-width: 450px;
    height: auto;
}

.cloze-text img {
    max-width: 450px;
    height: auto;
}
</style>

Back Template:

<div style='font-family: "Arial"; font-size: 25px;'>

<div class="cloze-text">
    {{cloze:Text}}
</div>

<br><br><hr>

<style>
img {
    max-width: 450px;
    height: auto;
}

.cloze-text img {
    max-width: 450px;
    height: auto;
}

.extra img {
    max-width: 450px;
    height: auto;
}

.Personal-Notes img {
    max-width: 450px;
    height: auto;


.citation img {
    max-width: 450px;
    height: auto;
}
</style>


<!-- Show the Extra field in a <details> disclosure widget if Extra is not empty-->
{{#Extra}}
<br><br>
<div class="extra-notes">
    {{Extra}}
</div>
{{/Extra}}

<!-- Show the Extra field in a <details> disclosure widget if Extra is not empty-->
{{#Personal Notes}}
<br><br>
<details class="Personal Notes">
    <summary>Personal Notes</summary>
    {{Personal Notes}}
</details>
{{/Personal Notes}}


<!-- Show the Extra field in a <details> disclosure widget if Extra is not empty-->
{{#Citation}}
<br><br>
<details class="citation">
    <summary>Citation</summary>
    {{Citation}}
</details>
{{/Citation}}

Styling:

.card {
    text-align: center;
}
.card {
  font-family: arial;
  font-size: 24px;
  text-align: center;
  color: black;
  background-color: white;
}

.cloze { font-weight: bold; color: #6495ED;}

Thanks for your help! Please let me know if there’s any other info I can provide!

4

You can make the collapsible sections open automatically by adding the open attribute to each of the <details> elements. For example, change this line in the back template:

<details class="Personal Notes">

to this:

<details open class="Personal Notes">
3 Likes
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.