Custom Javascript toggle button not working and unsure why

anon20141267 · February 5, 2022, 4:45pm

I have two javascript buttons in my card template, one which hides a box and adds border-radius to the box above it, and another which shows the hidden box. Only the former button works and I can’t figure out why.

For the button that doesn’t work (myHint function), the box it shows should be hidden by default, and shown on click.
For the button that is working (toggle function), the box that will be hidden is shown by default, and hidden on click.

Here’s a gif so you can see functionality. The button that isn’t working is at the top–the first white box with the Japanese sentence and the plus.

Peek 2022-02-05 11-31

What do I need to change in my code below to make the top box work?

Here’s my (truncated) HTML and CSS.

<div id="card">

<div id="section_term" class="section">{{Expression}}<br><span class="phonetic">{{Reading}}</span>
<img id="button_term" class="button" src="_plus.png" onclick="myHint(p)">
</div>

 <div id="sample_term" class="sample">{{Sentence}}</div>

{{#Meaning}}
  <div id="section_def" class="section">Definition
  <img id="button_def" class="button" src="_minus.png" onclick="toggle('def')">
  </div>
  <div id="sample_def" class="sample other_areas">{{Meaning}}</div>
{{/Meaning}}

</div>

</style>
<style>

.button {
 position: absolute;
 right: 12px;
 bottom: 15px;
 width: 28px;
 opacity: 0.75;
}

.section {
 position: relative;
 text-align: left;
 border-radius: 15px 15px 0 0;
 color: #fff;
}

#section_term {
 font-size: 30px;
 background:#5E81AC url(_magnifying-glass.png) scroll 10px center no-repeat;
 background-size: 28px;
 padding: 15px 10px 10px 52px;
}

#section_def {
 font-size: 22px;
 line-height: 160%;
 background-color: #5E81AC;
 background-image: url(_map-pointer.png); 
 background-attachment: scroll;
 background-position: 15px 12px;
 background-repeat: no-repeat;
 background-size: 20px;
 padding: 10px 10px 10px 52px;
}


.sample {                            /*    white/bottom boxes   */
 font-size: 16px;
 background-color: #fff;
 border-radius: 0 0 15px 15px;
 box-shadow: 0 1px 2px rgba(0,0,0,0.23);
 margin-bottom: 18px;
}

#sample_term {                    /*    sentence in main term   */
 font-size: 20px;
 padding: 15px;
 display: block;
}

#sample_def {
 display: block;
 overflow-wrap: break-word;
 hyphens: auto;
 font-size: 20px;
 padding: 10px 15px 15px 15px;
}

<script>


function myHint(p){
 var box = document.getElementById('sample_term' + p);
 var btn = document.getElementById('button_term' + p);
 var space = document.getElementById('section_term' + p);
 var justBox = document.getElementById('sample_term');
 var sentenceDisplay = justBox.style.display; 

 if (sentenceDisplay == 'block'){
  box.style.display = 'none';
  btn.src = '_plus.png';
  space.style.marginBottom='15px';
  space.style.borderBottomLeftRadius='15px';
  space.style.borderBottomRightRadius='15px';
 }
 
 else {
  box.style.display = 'block'; 
  btn.src = '_minus.png';
  space.style.marginBottom='0px';
  space.style.borderBottomLeftRadius='0px';
  space.style.borderBottomRightRadius='0px';
 }
}


function toggle(e){
  var box = document.getElementById('sample_'+ e); 
  var btn = document.getElementById('button_' + e); 
  var space = document.getElementById('section_' + e); 

	if (box.style.display=='none'){
		box.style.display='block';
		btn.src = '_minus.png';
		space.style.marginBottom='0px';
		space.style.borderBottomLeftRadius='0px';
		space.style.borderBottomRightRadius='0px';
	}
	else {
		box.style.display = 'none';
		btn.src='_plus.png';
		space.style.marginBottom='15px';
		space.style.borderBottomLeftRadius='15px';
		space.style.borderBottomRightRadius='15px';
	}

}

</script>

abdo · February 7, 2022, 12:41am

You can make it easier for people to help by exporting a sample deck and uploading it somewhere like https://gofile.io/ so they can test it quickly.

anon20141267 · February 7, 2022, 10:28pm

Oh, good idea. I’ve uploaded a sample deck here: Gofile - Free file sharing and storage platform

abdo · February 8, 2022, 1:41am

I had a brief look and could fix the issue after doing some changes.

Updated Back Template

<div id="card">

<div id="section_term" class="section">{{Expression}}<span class="alt">{{#Alternative writing}}・{{Alternative writing}}{{/Alternative writing}}</span> <span>{{AwesomeTTS}}</span><br><span class="phonetic">{{Reading}}</span>

<img id="button_term" class="button" src="_plus.png" onclick="myHint('term')">

</div>


  <div id="sample_term" class="sample">{{Sentence}}{{#Sentence source link}}<br><span id="link">{{Sentence source link}}</span>{{/Sentence source link}}
  </div>


{{#Meaning}}
  <div id="section_def" class="section">Definition
  <img id="button_def" class="button" src="_minus.png" onclick="toggle('def')">
  </div>
  <div id="sample_def" class="sample other_areas">{{Meaning}}</div>
{{/Meaning}}



{{#Image}}
  <div id="section_img" class="section">Image
  <img id="button_img" class="button" src="_minus.png" onclick="toggle('img')">
  </div>
  <div id="sample_img" class="sample other_areas">{{Image}}</div>
{{/Image}}



{{#Notes}}
  <div id="section_note" class="section">Notes
  <img id="button_note" class="button" src="_minus.png" onclick="toggle('note')">
  </div>
  <div id="sample_note" class="sample other_areas">{{Notes}}</div>
{{/Notes}}


</div>

Updated Styling

</style>
<style>

/* Do not remove above tags or the javascript breaks */

.card {
 background-color: #ECEFF4;
 font-family: "Ideal-Sans", Yu Gothic;
 text-align: left;
 color:#212121;
}

#link a {
 color: gray;
 font-size: 12px;
 text-align: right;
 text-decoration: none;
}

.button {
 position: absolute;
 right: 12px;
 bottom: 15px;
 width: 28px;
 opacity: 0.75;
}

/***************     default anki audio button styling being overridden below
.replay-button { text-decoration: none; display: inline-flex; vertical-align: middle; margin: 3px; }
.replay-button svg { width: 40px; height: 40px; }
.replay-button svg circle { fill: #fff; stroke: #414141; }
.replay-button svg path { fill: #414141; }
****************/

.replay-button svg {
 display: none;
}

.replay-button {
 background-image: url(_play.png);
 background-size: 20px;
 display: inline-block;
 width: 30px;
 height: 30px;
 margin-left: 10px;
 background-repeat: no-repeat;
}

.alt {
 font-size: 22px;
 color: lightgray;
}

.section {
 position: relative;
 text-align: left;
 border-radius: 15px 15px 0 0;
 color: #fff;
}

#section_term {
 font-size: 30px;
 background:#5E81AC url(_magnifying-glass.png) scroll 10px center no-repeat;
 background-size: 28px;
 padding: 15px 10px 10px 52px;
}

#section_def {
 font-size: 22px;
 line-height: 160%;
 background-color: #5E81AC;
 background-image: url(_map-pointer.png); 
 background-attachment: scroll;
 background-position: 15px 12px;
 background-repeat: no-repeat;
 background-size: 20px;
 padding: 10px 10px 10px 52px;
}

#section_img {
 font-size: 22px;
 line-height: 160%;
 background-color: #5E81AC;
 background-image: url(_camera.png); 
 background-attachment: scroll;
 background-position: 12px;
 background-repeat: no-repeat;
 background-size: 28px;
 padding: 10px 10px 10px 52px;
}

#section_note {
 font-size: 22px;
 line-height: 160%;
 background-color: #5E81AC;
 background-image: url(_paper.png); 
 background-attachment: scroll;
 background-position: 15px;
 background-repeat: no-repeat;
 background-size: 28px;
 padding: 10px 10px 10px 52px;
}

.sample {                            /*    white/bottom boxes   */
 font-size: 16px;
 background-color: #fff;
 border-radius: 0 0 15px 15px;
 box-shadow: 0 1px 2px rgba(0,0,0,0.23);
 margin-bottom: 18px;
}

#sample_term {                    /*    sentence in main term   */
 font-size: 20px;
 padding: 15px;
 display: block;

}

.phonetic {
	font-size: 68%;
  color: #fdd099;
  display: block;
  padding-bottom: 0px;
}

/* Eventually, clean up code so that the same code for all the header top bars and bottom bars, the latter being called "other areas," use the same code */

.other_areas {}

.other_areas a {
 color: #618cb0;
 text-decoration: none;
 padding-bottom: 3px;
 border-bottom: 1px dashed;
 transition-property: all;
 transition: 0.3s; 
}

.other_areas a:hover {
 color: #7b61b0;
 text-decoration: none;
 border-bottom: 1px dashed;
 border-color: rgba(255,255,255,0);
}

#sample_def {
 display: block;
 overflow-wrap: break-word;
 hyphens: auto;
 font-size: 20px;
 padding: 10px 15px 15px 15px;
}

#sample_def b { 
 color: #2E3440;
 background-color: #E5E9F0;
 padding: 4px;
 border-radius: 1.75px; 
}

#sample_def ul {
  margin-bottom: -4px !important;
  margin-top: 10px;
  line-height: 100%; 
}

#sample_def li:first-of-type { 
 color: #fff;
 background-color: #4C566A;
 display: inline-block;
 border-radius: 5px;
 padding: 4.75px;
 font-size: 14px;
 margin-left: -37px;
}

#sample_def li:not(:first-of-type) { 
 line-height: 120%;
}

#sample_def li {
  margin-bottom: 10px;
  padding-left: 5px;
  list-style-type: circle;
}

#sample_img {
 display:block;
 padding: 15px;
}

#sample_img img {
 display: block;
 margin: 0 auto;
 border-radius: 3px;
}

#sample_note {
 display:block;
 font-size: 20px;
 padding: 15px;
}

 /***************************  M O B I L E  ************************************/
 
.mobile .button {
 right: 15px;
 bottom: 13px;
 width: 27px;
}

.mobile .alt {
 font-size: 18px;
}

.mobile #sample_term {
 font-size: 18px;
}

.mobile #sample_def {
 font-size: 18px;
 padding: 10px 15px 15px 15px;
}

.mobile #sample_def ul {
  margin-top: 4px;
}

.mobile #sample_def li {
  margin-bottom: 5px;
}

.mobile #sample_def li:not(:first-of-type) { 
 line-height: 130%;
 margin-left: -10px;
} 

.mobile #sample_note {
 font-size: 18px;
}

.mobile #section_term {
 font-size: 24px;
 padding: 8px 10px 5px 52px;
 background-size: 23px;
}

.mobile .phonetic {
 margin-top: -4px;
 padding-bottom: 2px;
}

.mobile #section_def {
 font-size: 20px;
 line-height: 170%;
 background-size: 17px;
 padding: 10px 10px 6px 52px;
}

.mobile #section_img {
 font-size: 20px;
 line-height: 170%;
 background-position: 10px;
 background-size: 24px;
 padding: 10px 10px 6px 52px;
}

.mobile #section_note {
 font-size: 20px;
 line-height: 170%;
 background-position: 15px;
 background-size: 19px;
 padding: 10px 10px 6px 52px;
}

 /***************************   N I G H T   M O D E   ***************************/

.card.nightMode {
 background-color: ;
 color: #ECEFF4;
 font-family: "Ideal-Sans", Yu Gothic;
}

.nightMode .other_areas a {
 color: #70a0db;
}

.nightMode .other_areas a:hover {
 color: #8c9c7c;
 font-weight: bold;
 border-color: rgba(255,255,255,0);
}

.nightMode .sample {
 background-color: #4C566A;
}

.nightMode #section_term {
 background:#434C5E url(_magnifying-glass.png) scroll 10px center no-repeat;
 background-size: 28px;
}

.nightMode #link a {
 color: #D8DEE9;
}

.nightMode #section_def {
 background-color: #434C5E;
}

.nightMode #section_img {
 background-color:#434C5E;
}

.nightMode #section_note {
 background-color:#434C5E;
}

.nightMode #sample_def b { 
 color: #fff;
 background-color: #486385;
 font-weight: normal; 
}

.nightMode #sample_def li:first-of-type { 
 background-color: #2E3440;
}

/************************         F O N T  I M P O R T         ***********************/


@font-face {
  font-family: "Ideal-Sans";
  src: url("_IdealSans-XLight-Pro.ttf");
}

@font-face {
  font-family: Yu Gothic;
	 src: url("_YuGothic-Regular.ttf");
}

</style>

<script>

/* Gotta figure out why this code isn't working */

function myHint(p){
 var box = document.getElementById('sample_' + p);
 var btn = document.getElementById('button_' + p);
 var space = document.getElementById('section_' + p);
 var justBox = document.getElementById('sample_term');
 var sentenceDisplay = justBox.style.display; 

 if (sentenceDisplay == 'block'){
  box.style.display = 'none';
  btn.src = '_plus.png';
  space.style.marginBottom='15px';
  space.style.borderBottomLeftRadius='15px';
  space.style.borderBottomRightRadius='15px';
 }
 
 else {
  box.style.display = 'block'; 
  btn.src = '_minus.png';
  space.style.marginBottom='0px';
  space.style.borderBottomLeftRadius='0px';
  space.style.borderBottomRightRadius='0px';
 }
}


function toggle(e){
  var box = document.getElementById('sample_'+ e); 
  var btn = document.getElementById('button_' + e); 
  var space = document.getElementById('section_' + e); 

	if (box.style.display=='none'){
		box.style.display='block';
		btn.src = '_minus.png';
		space.style.marginBottom='0px';
		space.style.borderBottomLeftRadius='0px';
		space.style.borderBottomRightRadius='0px';
	}
	else {
		box.style.display = 'none';
		btn.src='_plus.png';
		space.style.marginBottom='15px';
		space.style.borderBottomLeftRadius='15px';
		space.style.borderBottomRightRadius='15px';
	}

}

</script>

anon20141267 · February 8, 2022, 4:25pm

Ahh, you are the BEST! Thank you!

Clearly my understanding of basic function parameters needs work lol

Now to clean up the rest of the code

dxxxxp · October 7, 2022, 7:39pm

Hello abdo!
I’ve got a problem with styling code.
Would you please help me out? It’s a headache for me and I’ve been trying to understand your code and fix it by myself, but I just failed to do it again and again.
I would really appreciate it if you can help me!
I’ve post it here.
https://forums.ankiweb.net/t/how-to-set-borderbottomradius-15px-when-i-toggle-hide/23703

dxxxxp · October 8, 2022, 8:35am

It’s been solved. Thank you anyway!

Topic		Replies	Views
Hide text with button - problem with styling Card Design	2	168	July 4, 2024
Help with keyboard shortcut button toggle Card Design	4	126	November 2, 2024
JavaScript not working for Version ⁨24.11 Card Design	3	128	March 10, 2025
This piece of javascript does not seem to work (hint button) Card Design	6	3647	May 1, 2023
How to hide certain images by default? Card Design	7	625	December 30, 2023

Custom Javascript toggle button not working and unsure why

Related topics