CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
onlymushu
onlymushu

Reputation: 113

Bootstrap Collapse show.bs.collapse not working a second time

For some reason I can't get show even to be triggered a second time even though I'm doing the exact same thing the first time.

Basically, I have a form where for my first two fields (Merchant Provider and Bank) the user can either pick from a drop down list or add new entries. So I'm using collapse to open the new row for new additions at the same time in Javascript I'm hidden the first row so the user don't see both rows (select and add new) at the same time. So everything works for the first row (hides the select and show the add) but on the second row only the collapse works but the javascript to hide the row doesn't.

Here's my HTML

 <div class="form-group" id="merchantRow">
    <label class="col-md-3 control-label" for="textinput">Merchant Provider</label>  
    <div class="col-md-7">
      <select id="merchantProvider">
        <option></option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="col-md-2"><a class="btn btn-sm btn-warning" data-toggle="collapse" data-target="#newMerchant"><i class="fa fa-plus"></i></a></div>
  </div>

  <div id="newMerchant" class="collapse">
    <div class="form-group">
      <label class="col-md-3 control-label" for="textinput">New Merchant Name / Slug</label>  
      <div class="col-md-4">
        <input id="textinput" name="textinput" type="text" placeholder="Name" class="form-control">
      </div>
      <div class="col-md-3">
        <input id="textinput" name="textinput" type="text" placeholder="Slug" class="form-control">
      </div>
      <div class="col-md-2"><a class="btn btn-sm btn-warning" data-toggle="collapse" data-target="#newMerchant"><i class="fa fa-repeat"></i></a></div>

    </div>
  </div>

  <div class="form-group" id="bankRow">
    <label class="col-md-3 control-label" for="textinput">Bank</label>  
    <div class="col-md-7">
      <select id="bank">
        <option></option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="col-md-2"><a class="btn btn-sm btn-info" data-toggle="collapse" data-target="#newBank"><i class="fa fa-plus"></i></a></div>
  </div>

  <div id="newBank" class="collapse">
    <div class="form-group">
      <label class="col-md-3 control-label" for="textinput">New Bank Name / Slug</label>  
      <div class="col-md-4">
        <input id="textinput" name="textinput" type="text" placeholder="Name" class="form-control">
      </div>
      <div class="col-md-3">
        <input id="textinput" name="textinput" type="text" placeholder="Slug" class="form-control">
      </div>
      <div class="col-md-2"><a class="btn btn-sm btn-info" data-toggle="collapse" data-target="#newBank"><i class="fa fa-repeat"></i></a></div>
    </div>
  </div>

Here's my simple Javascript:

$('#newMerchant').on('show.bs.collapse', function() {
  $('#merchantRow').toggle();
}).on('hide.bs.collapse',function() {
  $('#merchantRow').toggle();
});

$('#newbank').on('show.bs.collapse', function() {
  $('#bankRow').toggle();
}).on('hide.bs.collapse',function() {
  $('#bankRow').toggle();
});

Upvotes: 0

Views: 3844

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

Your HTML ID is camel-case and the JS selector is lower-case. These need to match.

<div id="newBank" class="collapse">
$('#newbank').on('show.bs.collapse'...

Upvotes: 1

Related Questions