Custom Javascript toggle button not working and unsure why

Card Design
1

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>
2

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.

3

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

4

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>
4 Likes
5

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

6

Hello :wave: 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.:disappointed_relieved:
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

7

It’s been solved. Thank you anyway!

8