Hi, I am trying to add a functionality into the article body for knowledge management. I have a article that have an accordion with a couple of checkboxes. I added a reset button to the article, and I wanted to click on it and unchecked all the checkboxes. When I try to add the JavaScript code and saved it disappear. Reading through some articles it said is not possible to add it. But just looking to an alternative.
<!-- Function to reset the button-->
<script>
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const clearButton = document.getElementById('reset-button');
clearButton.addEventListener('click', function() {
checkboxes.forEach(function(checkbox){
checkbox.checked = false;
});
});
</script>
This is the HTML code:
<style type="text/css"><span id="__caret">_</span><span id="__caret">_</span>�<span id="__caret">_</span>�<span id="__caret">_</span>
body{
max-width: 1024px;
}
.accordion {
max-width: 1024px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 5px;
overflow: hidden;
font-family: 'Quicksand', sans-serif;
/*background: #009578;*/
/*background: black;*/
}
.accordion__label,
.accordion__content {
padding: 14px 20px;
}
.accordion__label {
display: block;
color: #002677;
font-weight: 200;
cursor: pointer;
position: relative;
transition: background 0.1s;
/*background: #009578;*/
}
.accordion__label:hover {
background: rgba(0,0,0,0.1);
}
.accordion__label::after{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
width: 12px;
height: 6px;
background-image: url('data:image/svg+xml;utf8,<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,0 50,50" style="fill:%2300000099;" /></svg>');
background-size: contain;
transition: transform 0.4s;
}
.accordion__content {
/*background: #009578;*/
/*background: pink;*/
line-height: 1.6;
/*font-size: 0.85em; */
display: none;
}
.accordion__input{
display: none;
}
.accordion__input:checked ~ .accordion__content {
display: block;
}
.accordion__input:checked ~ .accordion__label::after {
transform: translateY(-50%) rotate(0.5turn);
}
.mainFont{
font-size: 12pt;
}
</style>
<div class="mainFont">
<div class="NonStepContent"><input id="reset-button" type="reset" /></div>
<div class="NonStepContent"> </div>
<div>
<div class="accordion"><label class="accordion__label" for="section1">Greeting<br /><span style="font-size: 10pt;"><label><input class="check3" name="checkbox1" type="checkbox" /> </label>Introduce self/greet caller</span></label>
<div class="accordion__content"> </div>
</div>
</div>
</div>
<p> </p>
<div>
<div class="accordion"><input id="section2" class="accordion__input" type="checkbox" /> <strong><span style="font-size: 12pt;"><label class="accordion__label" for="section2">Verification</label></span></strong>
<div class="accordion__content">
<div><span style="font-size: 10pt; color: #002677;"><strong>Verified</strong></span></div>
<div> </div>
<div>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="font-size: 12.0pt; font-family: 'Quicksand', sans-serif;"><input name="checkbox1" type="checkbox" /></span><span style="font-size: 10pt; font-family: 'Quicksand', sans-serif; color: #002677;">Confirm caller <first name and last name if not known> </span></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"> </p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: Quicksand, sans-serif;"><strong><span style="font-size: 10.0pt; line-height: 107%; font-family: Quicksand, sans-serif; color: #002677;">Not IVR Verified</span></strong></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"> </p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="color: #002677;"><span style="font-size: 12.0pt; font-family: 'Quicksand', sans-serif;"><input name="checkbox1" type="checkbox" /></span><span style="font-size: 10.0pt; font-family: 'Quicksand', sans-serif;">Confirm First Name, Last Name </span></span></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"> </p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="font-size: 12pt;"><strong>*Confirm one of the following:</strong></span></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"> </p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="font-size: 12.0pt;"><span style="font-size: 10.0pt; line-height: 107%; font-family: 'Quicksand', sans-serif;"><input name="checkbox1" type="checkbox" /><span style="color: #002677;">Confirm Date of Birth </span></span><span style="color: #002677;"> </span></span></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="color: #002677;"> </span></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="color: #002677;"><span style="font-size: 12.0pt;"><span style="font-size: 10.0pt; line-height: 107%; font-family: 'Quicksand', sans-serif;"><input name="checkbox1" type="checkbox" />Confirm Full address <street, city, state, zip code and apt #?> </span> </span></span></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="color: #002677;"> </span></p>
<p style="margin: 0in 0in 0.0001pt; line-height: normal; font-size: 11pt; font-family: Quicksand, sans-serif;"><span style="font-size: 10pt; font-family: 'Quicksand', sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Confirm Claim File Number</span></p>
</div>
</div>
</div>
</div>
<p> </p>
<div>
<div class="accordion"><input id="section3" class="accordion__input" type="checkbox" /> <span style="font-size: 12pt;"><label class="accordion__label" for="section3">Confirm Order Status</label></span>
<div class="accordion__content">
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #000000; font-size: 10pt;"><input name="checkbox1" type="checkbox" /><span style="color: #002677;"><strong><span style="line-height: 107%; font-family: 'Quicksand', sans-serif;">In Progress: </span></strong><span style="line-height: 107%;">All orders except incarcerated<strong><span style="font-family: 'Quicksand', sans-serif;"> <a href="#“demographics”" rel="nofollow">Continue to demos</a></span></strong></span></span></span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #000000; font-size: 10pt;"> </span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #000000; font-size: 10pt;"><input name="checkbox1" type="checkbox" /><span style="color: #002677;"><strong><span style="line-height: 107%; font-family: 'Quicksand', sans-serif;">Canceled Order: </span></strong>do not update information/demographics; direct to:</span></span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #002677; font-size: 10pt;"> </span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #002677; font-size: 10pt;"><input name="checkbox1" type="checkbox" /><strong><span style="line-height: 107%; font-family: 'Quicksand', sans-serif;">Completed Order:</span></strong> do not update demographics.<strong><span style="font-family: 'Quicksand', sans-serif;"> </span></strong><strong><span style="line-height: 107%; font-family: 'Quicksand', sans-serif;">Results Inquiry: </span></strong>Direct to: <strong><span style="line-height: 107%; font-family: 'Quicksand', sans-serif;">Reimbursement Inquiry:</span></strong> Connect ext.</span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #002677; font-size: 10pt;"> </span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #002677; font-size: 10pt;"><input name="checkbox1" type="checkbox" /><strong><span style="line-height: 107%; font-family: 'Quicksand', sans-serif;"> Pending Order:</span></strong> do not provide information/update demographics; direct to Dispo</span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #002677; font-size: 10pt;"> </span></p>
<p style="margin: 0in 0in 8pt; line-height: 107%; font-size: 11pt; font-family: 'Quicksand', sans-serif;"><span style="color: #002677; font-size: 10pt;"><input name="checkbox1" type="checkbox" /> <strong><span style="line-height: 107%; font-family: 'Quicksand', sans-serif;">Incarcerated Order: </span></strong><span style="line-height: 107%;">do not update information/demographics; direct</span></span></p>
</div>
</div>
</div>
<p> </p>
<div>
<div class="accordion"><input id="section5" class="accordion__input" type="checkbox" /> <span style="font-size: 12pt;"><label class="accordion__label" for="section5">Demographics</label></span>
<div class="accordion__content">
<div><input id="section5a" class="accordion__input" type="checkbox" /> <a name="“demographics”"></a><label class="accordion__label" for="section5a"><strong><span style="font-size: 10pt;">Contact Card Blue:</span></strong> <span style="font-size: 10pt;">Confirm information hasn't changed and address can receive FedEx. Click confirm demographic button in WebApp.</span></label>
<div class="accordion__content">
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><strong><span style="font-family: 'Quicksand', sans-serif;">*Select one of the following:</span></strong></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt;"><span style="line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Information hasn't changed; no changes needed.</span></span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Information has changed; update information as necessary. </span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"> </p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><strong><span style="font-family: 'Quicksand', sans-serif;">*Select one of the following:</span></strong></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 11.0pt; line-height: 106%; font-family: 'Quicksand', sans-serif;"><input name="checkbox1" type="checkbox" /><span style="color: #002677; font-size: 10pt;">Can receive FedEx at address. </span></span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Cannot receive FedEx at address; Update to an alternate address.</span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />PO Box listed; Add a physical address for appropriate mileage calculation. </span></p>
</div>
</div>
<div><input id="section5b" class="accordion__input" type="checkbox" /> <span style="font-size: 10pt;"><label class="accordion__label" for="section5b"><strong>Contact Orange Card:</strong> Confirm all demographic information. Click confirm demographic button in WebApp.</label></span>
<div class="accordion__content">
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><strong><span style="font-family: 'Quicksand', sans-serif;">*Select one of the following for address information:</span></strong></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 11pt; line-height: 106%; font-family: 'Quicksand', sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" /><span style="font-size: 10pt;">Can receive FedEx at address</span></span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Cannot receive FedEx at address; Update to an alternate address.</span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />PO Box listed; Add a physical address for appropriate mileage calculation.</span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"> </p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><strong><span style="font-family: 'Quicksand', sans-serif;">*Confirm the following:</span></strong></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Primary contact number(s) </span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Opt-In preference: Email (Confirm spelling) and or text (Advise standard text messaging rates may apply)</span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"> </p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><strong><span style="font-family: 'Quicksand', sans-serif;">*Select one of the following:</span></strong></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif;"><input name="checkbox1" type="checkbox" /><span style="color: #002677;">Opted in to paperless: Remind caller appointment details are on once scheduled. </span></span></p>
<p style="margin: 0in 0in 8pt; line-height: 106%; font-size: 12pt; font-family: 'Quicksand', sans-serif;"><span style="font-size: 10pt; line-height: 106%; font-family: Quicksand, sans-serif; color: #002677;"><input name="checkbox1" type="checkbox" />Not opted into paperless: inform caller of paperless option and direct to register and opt-in. </span></p>
</div>
</div>
</div>
</div>
