CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Debopam Parua
Debopam Parua

Reputation: 530

Checkbox doesn't show checked if used as bootstrap data-toggle button

I have a checkbox that I am using to collapse another div using bootstrap toggle. But even though the collapsible div expands and collapses on clicking the checkbox, the checkbox doesn't show the checked icon. The code is as below:

<div class="form-check form_input_row">
    <input class="form-check-input input_section_checkbox" type="checkbox" id="section_checkbox" name="section_checkbox" data-toggle="collapse" href="#sectionName_drop_down" role="button" aria-expanded="false" aria-controls="sectionName_drop_down">
    <label class="form-check-label" for="sectionName_checkbox">sectionName</label>
</div>
<div class="collapse" id="sectionName_drop_down">
    <div class="form-group row form_input_row">
        <label for="FieldName_input" class="col-sm-6 col-form-label">FieldLabel</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputField_input" name="inputField_input" placeholder="FieldLabel">
        </div>
    </div>
</div>

On clicking section_checkbox, the div sectionName_drop_down collapses and expands accordingly.. But no checked sign is shown on the checkbox. I tried to find a solution on google but could not find anything. I need help with this.

Upvotes: 0

Views: 959

Answers (2)

Matt
Matt

Reputation: 492

Hope this could be helpful:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container">

    <input type="checkbox" data-toggle="collapse" data-target="#sectionName_drop_down">
    <label class="form-check-label" for="sectionName_checkbox">sectionName</label>
    <div class="collapse" id="sectionName_drop_down">
      <div class="form-group row form_input_row">
        <label for="FieldName_input" class="col-sm-6 col-form-label">FieldLabel</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputField_input" name="inputField_input" placeholder="FieldLabel">
        </div>
      </div>
    </div>
  </div>

</body>
</html>

Upvotes: 1

Omprakash Arumugam
Omprakash Arumugam

Reputation: 1044

I can reproduce this issue. Try Simple Collapsible, it is working. Just change href="#sectionName_drop_down" to data-target="#sectionName_drop_down".

Upvotes: 1

Related Questions