# Accordion

## Shows using FooTable with Bootstraps' accordion component.

#### Notes

- This example makes use of Bootstraps' accordion component.
- The base table in the example below is a clone of the showcase example to demonstrate that various table operations such as filtering, sorting, paging still function correctly.

#### Collapsible Group Item #1

#### Collapsible Group Item #2

    jQuery(function($){
    	$('#accordion-example-1,#accordion-example-2').footable({
    		"columns": $.get('columns.json'),
    		"rows": $.get('rows.json')
    	});
    });

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    	<div class="panel panel-default">
    		<div class="panel-heading" role="tab" id="headingOne">
    			<h4 class="panel-title">
    				<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    					Collapsible Group Item #1
    				</a>
    			</h4>
    		</div>
    		<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    			<div class="panel-body">
    				<table id="accordion-example-1" class="table" data-paging="true" data-filtering="true" data-sorting="true"></table>
    			</div>
    		</div>
    	</div>
    	<div class="panel panel-default">
    		<div class="panel-heading" role="tab" id="headingTwo">
    			<h4 class="panel-title">
    				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    					Collapsible Group Item #2
    				</a>
    			</h4>
    		</div>
    		<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    			<div class="panel-body">
    				<table id="accordion-example-2" class="table" data-paging="true" data-filtering="true" data-sorting="true"></table>
    			</div>
    		</div>
    	</div>
    </div>