bootstrap panel shown.bs.collapse get the ajax data on header and show loading icon on delay

Question

I'm using bootstrap accordion panel to show data. I need to get the data from server using ajax get response on header title. Below is the code which I'm using on each panel title i need to implement ajax request.

Example: on click Collapsible Group Item #1 needs to implement ajax request, change the # number and also display loading icon instead of glyphicon-chevron-down after getting the response need to show back glyphicon-chevron-down with delay of 1000.

                   <div class="panel-group" id="accordion">
             <div class="panel panel-default" id='result'>
               <div class="panel-heading">
                <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Collapsible Group Item #1 
                </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                   Collapsible Group Item #2 
                </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Collapsible Group Item #3 
                </a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>


('#accordion').on('shown.bs.collapse', function () {
   // do ajaxy stuff…
    alert('test');
   //$('#result').toggle('1000');
    //  $("i",this).toggleClass("glyphicon-chevron-down glyphicon-chevron-spinner");
 })

Answer 1

My answer uses fontawesome instead and it should be pretty easy to change it to use glyphicons. The script takes the id to be sent along with ajax request from data-id attribute of anchor tag used in the collapsible title. And naturally ajax request fails by default. Changes the title as requested after the ajax request..

// Add your javascript here
$(document).ready(function() {
  $('a[data-toggle="collapse"]').on('click', function(e) {
    var Myi = $(e.target).next();

    $.ajax({
      type: "get",
      url: "/test/testservice?id=" + $(e.target).data("id"),
      beforeSend: function() {
        Myi.attr("class", "fa fa-cog fa-spin pull-right");
      },
      success: function() {
        //...
        $(e.target).html("Successfull for id #" + $(e.target).data("id"));
        Myi.delay(500).queue(function(next) {
          Myi.attr("class", "fa fa-check text-success pull-right");
          next();
        }).delay(500);
        alert("Successfully received content with id: " + $(e.target).data("id"));
      },
      error: function() {
        //..
        $(e.target).html("Unsuccessfull for id #" + $(e.target).data("id"));

        Myi.delay(500).queue(function(next) {
          Myi.attr("class", "fa fa-times text-danger pull-right");
          next();
        }).delay(500);
        alert("Couldn't get content with id: " + $(e.target).data("id"));
      }
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
  <div class="panel panel-default" id='result'>
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-id="1" href="#collapseOne">
                  Collapsible Group Item #1 
                </a><i class="fa fa-chevron-right pull-right"></i>
              </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-id="2" href="#collapseTwo">
                   Collapsible Group Item #2 
                </a><i class="fa fa-chevron-right pull-right"></i>
              </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-id="3" href="#collapseThree">
                  Collapsible Group Item #3 
                </a><i class="fa fa-chevron-right pull-right"></i>
              </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>