I am trying to create an accordion from my unordered list items from the demo here: https://codepen.io/abergin/pen/BaKVWd it's really simple and just what I need, however I need to be able to attach a - <input type="checkbox" checked> value to all my li elements. I do not have access to the HTML.
The list is displayed inside a bootstrap modal iframe...
<div class="modal-body"><iframe id="researchiframe" name="display-frame" style="width:100%;height:600px;"></iframe></div>
My list code is below.
<ul id="result_details" style="padding:0px">
// li elements are created dynamically here//
</ul>
I'm not sure how to do this.
You will need to loop through all <li> elements. Then you could use append() to add the HTML you want after each <li> tag.
$('ul#result_details li').each(function(index) {
$(this).append('<input type="checkbox" checked>');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="result_details" style="padding:0px">
<li></li>
<li></li>
<li></li>
</ul>