Bootstrap tabcollapse not working for ajax call on small screens

Question

I am using Bootstrap tabcollapse plugin from this link: https://github.com/flatlogic/bootstrap-tabcollapse .

This plugin switches bootstrap tabs component to collapse (accordion) for small screens (mobile phone) and it is working fine for Larger screens eg Desktop. I have a ajax call on one of the tab. This ajax call is working absolutely fine when tabs are shown on large screen (eg Desktop), but when tabs get switched to accordion for small screen, ajax query is not getting fired. Following is my code:

<ul id="details-tabs" class="nav nav-tabs">
  <li id="my-charges" class="active">
    <a href="#charges" data-toggle="tab">Charges</a>
  </li>
  <li id="conditions">
    <a href="#detail-conditions" data-toggle="tab">Conditions</a>
  </li>            
</ul>

<div class="tab-content">

  <div class="tab-pane fade in active" id="charges">
     Some HTML
  </div>

  <div class="tab-pane fade" id="detail-conditions">
     Data Via ajax
  </div>

</div>

<script>

  $('#conditions').click(function() 
  {  
    $.ajax({  
      dataType:'html' ,
      type: 'GET' , 
      data: {'id':1}, 
      url: 'controller/action',
      success: function(result)
             {
                $('#detail-conditions').html(result);
             }    
    });
  });

  $('#details-tabs').tabCollapse();

</script>

Answer 1

Add $('#details-tabs').tabCollapse(); in ajax success function.

    <script>

      $('#conditions').click(function() 
      {  
        $.ajax({  
          dataType:'html' ,
          type: 'GET' , 
          data: {'id':1}, 
          url: 'controller/action',
          success: function(result)
                 {
                    $('#detail-conditions').html(result);
$('#details-tabs').tabCollapse();
                 }    
        });
      });



    </script>