First Panel Header
First panel content goes here...
Second Panel Header
Second panel content goes here...
Third Panel Header
Third panel content goes here...
***
### Callbacks
There are two ways to bind to callbacks in your tabs.
{{#markdown}}
Callback function
```html
```
{{/markdown}}
{{#markdown}}
Toggled Event
```html
```
{{/markdown}}
***
## Accessibility
You can make tabs more accessible by using the code snippet below. The tabs are keyboard accessible meaning that a user can use the tab key or arrow keys to navigate through them. The role of `tablist` tells a screen reader what the element is and reads the necessary content.
HTML
{{#markdown}}
```html
{{> examples_tabs_accessibility}}
```
{{/markdown}}
Rendered HTML
{{> examples_tabs_accessibility}}
***
### Adding New Tab Content After Page Load
If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:
{{#markdown}}
```javascript
$(document).foundation();
```
{{/markdown}}
Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.
{{#markdown}}
```javascript
$(document).foundation('tab', 'reflow');
```
{{/markdown}}
***
## Customize with Sass
Tabs can be easily customized with the Sass variables provided in the `_settings.scss` file.