CODEWITHSUNDEEP
htmlcssbootstrap-4
Juraj Béger
Juraj Béger

Reputation: 135

Collapse in form-group

I want to create a form-group row with multiple columns and then collapse each column separately, but according to the templates the "div class="collapse" has to stay above the "div class="form group row" which prevents me from putting taging separate columns to collapse. EDIT: One button cannot collapse two separate elements (1. label 2.input). The code below shows only how can it be done with two buttons. Is there an easier way so that one button will actualy collapse bothe the label and input?

  <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:

https://jsfiddle.net/Dexter666/4ydq0upk/

Upvotes: 0

Views: 2197

Answers (1)

Huy Nguyen
Huy Nguyen

Reputation: 434

Pls refer my fixes for ur case:

https://jsfiddle.net/4ydq0upk/23/

u should add data-parent to each collapse column and round them with parent in data-parent. Pls refer bootstrap document for more detail: 

https://getbootstrap.com/docs/4.0/components/collapse/

Upvotes: 1

Related Questions