I am currently facing an issue with a toggle button that is not loading the relevant CSS properly when using jQuery to append content. The appended content includes check boxes loaded with the Labelauty jQuery Plugin, which are functioning correctly.
Below is the HTML code for the panel containing the toggle button:
<div class="col-md-6">
<div class="panel">
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion">
<h4>Test<i class="fa fa-thumbs-o-down"></i> <small>CASES</small>
<div class="toggle-wrap w-checkbox">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle()">
<label class="toggle-label w-form-label" for="Toggle-Switch"> </label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</h4>
</div>
<br>
<button type="button" class="btn btn-info float-right" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>
<!--TestPlan Panel-->
<div class="Panel">
<div class="col-md-13">
<div class="panel">
<div class="panel-body container-fluid">
<h4>Test<i class="fa fa-thumbs-o-down"></i> <small>PLAN</small></h4>
<!-- Start list -->
<ul id="testplan" class="list-group"></ul>
</div>
<!-- End list -->
</div>
</div>
</div>