I am trying to figure out how to create a form-group row with multiple columns and collapse each column separately. The issue I'm facing is that the "div class="collapse" needs to be above the "div class="form group row," making it challenging to tag separate columns for collapsing purposes. EDIT: It seems like one button cannot collapse two distinct elements (1. label 2.input). The code snippet below demonstrates collapsing using two buttons, but is there an easier way to have one button collapse both the label and input simultaneously?
<div class="form-group row">
<label for="Payment1" class="col-sm-1 col-form-label">Payments:</label>
<div class="col-sm-3">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
Payment 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
Payment 2
</a>
</div>
Payment 1: