user3002600
user3002600

Reputation: 165

Bootstrap accordion ajax load only on click

Im wondering if its possible to load an ajax to a accordion only if the content is active. This would avoid unnecessary data loading. There could be somekind of spinner added meanwhile loading. Have been looking through the internet and haven't found any solution. Thanks.

Here is the raw accordion example

http://www.bootply.com/117967

Upvotes: 3

Views: 6507

Answers (2)

SQL
SQL

Reputation: 41

Try this:

$('#myCollapsiblePanel').on('show.bs.collapse', function(e){
   var itemId  = $(e.target).attr('id').replace('prefix_for_the_ID_of_panel-collapse-div','');
   //$(e.target) refers to the panel-collapse div. 
   //use the itemId to get the relevant data from server via ajax
   //then you can populate the panel-collapse div. 
});

Upvotes: 1

isherwood
isherwood

Reputation: 61114

Bootstrap has a panel shown event that you can use.

$('#myCollapsiblePanel').on('shown.bs.collapse', function () {
  // do ajaxy stuff…
})

http://getbootstrap.com/javascript/#collapse-usage

Upvotes: 0

Related Questions