JavaScript toggle DIV based on checkbox

Like was mentioned in a comment, you have a case issue that needs fixing 'Vanilla' -> 'vanilla' etc.

Also, maybe this will help on the ternary operator (it took me a while to get my head around it): typically, you want to use the ternary to return something, not just to toggle between executing two different conditions.

ie. let newVar = checkSomething === checkAgainst ? this : that

And since you're using a .hideDiv class already for setting display style, you can use the element.classList.toggle(className) method to switch between the two states and let vanilla js handle the boolean in the background.

I left the console.log(thing) in the snippets just because it helped me follow what was what at each point.

function toggle(flavor){
  var checkBox = document.getElementById(flavor)
  console.log(checkBox)
  
  let divElement = document.getElementById(flavor+"Div")
  console.log(divElement)
  
  divElement.classList.toggle('hideDiv')
  }

.hideDiv{
  display:none
}

<input type="checkbox" id="vanilla" onClick="toggle('vanilla')"/> Vanilla
<input type="checkbox" id="cherry"  onClick="toggle('cherry')"/> Cherry
<input type="checkbox" id="apple" onClick="toggle('apple')" /> Apple

<div id="vanillaDiv" class="hideDiv">
<textarea  id="vanComments"></textarea>
</div>

<div id="cherryDiv" class="hideDiv">
<textarea id="cherComments"></textarea>
</div>

<div id="appleDiv" class="hideDiv">
<textarea id="appComments"></textarea>
</div>

You have some typos on your pen. JavaScript is case sensitive, so vanillaDiv and VanillaDiv are not the same thing. All your DIVs were starting with lowercase while your checkboxes were in uppercase, therefore you would never be able to correctly match the element.

EDIT: (just for the record) To correctly verify if a checkbox is checked or not, you need to use the .checked property. (forgot to write this part of text, although the code I posted had this correction since the beginning).

So change :

<div id="vanillaDiv" class="hideDiv">
<textarea  id="vanComments"></textarea>
</div>

to :

<div id="VanillaDiv" class="hideDiv">
<textarea  id="vanComments"></textarea>
</div>

Also, the use of the .checked property for the checkbox and a simpler way for the ternary would be :

function toggle(flavor){
  var checkBox = document.getElementById(flavor).checked;
  document.getElementById(flavor+"Div").style.display = checkBox === true ? "block" : "none";
}