First, create the section that you want to show/hide. Give it a unique ID so you can reference it later.

<div class="pdp-controls personalization-label" id="pdp-controls-first" data-validation="control">
<label for="{{cartOptionId}}">{{configuratorLabels}} : </label>
<select class="product-views-option-text-input" {{#if showUploadLogo}} name="showUploadLogo-block"
{{/if}} data-action="field-trigger" data-id="{{cartOptionId}}" type="{{type}}"
id="{{cartOptionId}}-inputid">
{{#if showUploadLogo}}<option value="no">No</option> {{/if}}
{{#each values}}
{{#if internalid}}
<option value="{{internalid}}" data-available="{{isAvailable}}" {{#if selected}}selected{{/if}}>
{{label}}</option>
{{/if}}
{{/each}}
</select>
</div>
Next, add a checkbox to your page that will trigger the show/hide functionality. Give it a unique ID and add an onclick event that will call a JavaScript function to show/hide the section.
<div>
<label class="personalized-logo-label" data-action="logo-imprint" for="personalized-view-logo-checkbox">
<input type="checkbox" id="personalized-logo-checkbox" class="personalized-view-logo-checkbox"
data-action="show-personalized-logo-option">
<h2>{{translate 'I would you like to add a color imprint for $90'}}</h2>
</label>
</div>

Finally, create the showHideSection() function in JavaScript that will show/hide the section based on the checkbox state.
showLogoOptionPersonalization: function showLogoOptionPersonalization() {
var checkvalue = document.getElementById("personalized-logo-checkbox").checked ? true : false;
console.log("checkvalue", checkvalue);
var self = this;
console.log('self=', self);
if (checkvalue) {
console.log("logo sucess");
$('.pdp-configurator-logo-block').show();
console.log('value=', $('.pdp-configurator-logo-block').show());
//this.pdp.setOption('custcol_ag_havepersonalization', 'T');
}
else {
console.log("logo error");
$('.pdp-configurator-logo-block').hide();
}
},
