Great job!
I’ve been working on another style of the collapsible accordion… however, here’s one I did the other day that is somewhat like yours. However, this one will show a form to update the status of a job.
What I have had problems with is the collapse of the previously opened row once another row is opened. Some reason I just haven’t found the key yet. Ha!
<td class="text-center">
<button class="btn btn-sm btn-primary" data-toggle="collapse" dmx-on:click="dynamic_collapse.toggle()" dmx-bs-tooltip="'View Status'">
<i class="fas fa-search"></i>
</button>
</td>
</tr>
<!-- STATUS DATA -->
<tr>
<td colspan="15" class="collapse bg-warning px-2" id="dynamic_collapse" is="dmx-bs4-collapse">
<div class="accordion" id="accordion1">
<!-- DATA DETAIL -->
<!-- update service record details -->
<form is="dmx-serverconnect-form" id="serverconnectform2" method="post" action="../../dmxConnect/api/ServiceStatus/service_status_update.php" dmx-generator="bootstrap4" dmx-form-type="vertical" dmx-populate="sc_service_status_detail.data.service_status_detail" dmx-on:success="browser1.alert('Service status was updated!')">
<!-- update button -->
<button type="submit" class="badge btn-primary p-1 mr-3"><i class="fas fa-edit"> </i>Update</button>
<!-- update button -->
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_scheduled2" name="scheduled" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.scheduled" value="1">
<div class="font-italic" for="inp_scheduled2">Scheduled</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_uploaded2" name="uploaded" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.uploaded" value="1">
<div class="font-italic" for="inp_uploaded2">Uploaded</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_processed2" name="processed" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.processed" value="1">
<div class="font-italic" for="inp_processed2">Processed</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_delivered2" name="delivered" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.delivered" value="1">
<div class="font-italic" for="inp_delivered2">Delivered</div>
</div>
</div>
<div class="form-check-inline">
<select id="inp_photographer2" name="photographer" dmx-bind:value="sc_service_status_detail.data.service_status_detail.photographer" dmx-bind:options="sc_team_member_list.data.team_member_list"
optiontext="team_member_first_name+' '+team_member_last_name" optionvalue="team_member_first_name+' '+team_member_last_name">
<option value="None">Photographer</option>
</select>
</div>
<div class="form-check-inline">
<select id="inp_assistant2" name="assistant" dmx-bind:value="sc_service_status_detail.data.service_status_detail.assistant" dmx-bind:options="sc_team_member_list.data.team_member_list"
optiontext="team_member_first_name+' '+team_member_last_name" optionvalue="team_member_first_name+' '+team_member_last_name">
<option value="None">Assistant</option>
</select>
</div>
<div class="form-check-inline">
<select id="inp_editor2" name="editor" dmx-bind:value="sc_service_status_detail.data.service_status_detail.editor" dmx-bind:options="sc_team_member_list.data.team_member_list"
optiontext="team_member_first_name+' '+team_member_last_name" optionvalue="team_member_first_name+' '+team_member_last_name">
<option value="None">Editor</option>
</select>
</div>
</form>
<!-- DATA DETAIL -->
</div>
</td><!-- Dynamic Collapse -->