Note that only the second and last steps differ from the default setup.

1. Include FooTable Core CSS

   (Same as in Getting Started).

   <link href="path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />

2. Add CSS for Your Custom Toggler

   <link href="path_to_your_css/your_additional_footable.css" rel="stylesheet" type="text/css" />

In this demo, we add classes "footable-expand" and "footable-contract" on elements that should appear for the expand and contract controls, respectively, and add display rules for those in css/arbitrary_toggle_markup.css:

.footable > tbody > tr > td > .footable-toggle > .footable-contract {
  display: none;
}
.footable > tbody > tr > td > .footable-toggle > .footable-expand {
  display: none;
}
.footable.breakpoint > tbody > tr > td > .footable-toggle > .footable-expand {
  display: inline;
}
.footable.breakpoint > tbody > tr.footable-detail-show > td > .footable-toggle > .footable-expand {
  display: none;
}
.footable.breakpoint > tbody > tr.footable-detail-show > td > .footable-toggle > .footable-contract {
  display: inline;
}

/** Override icons from footable.core.css:  **/
.footable.breakpoint > tbody > tr.footable-detail-show > td > span.footable-toggle:before {
  content: "";
}
.footable.breakpoint > tbody > tr >  td > span.footable-toggle:before {
  content: "";
}

Note that the last two rules override rules from footable.core.css that would add icons to a span with the footable-toggle.class. In practice, you might more likely replace footable.core.css with your own version.

3. Include jQuery

   (Same as in Getting Started).

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

4. Include FooTable jQuery Plugin

   (Same as in Getting Started).

   <script src="path_to_your_js/footable.js" type="text/javascript"></script>

5. Initialize FooTable, Overriding toggleHTMLElement

   Your markup must include an enclosing span. FooTable keys off this element, adding and removing the span as needed based on the width of the viewport and the defined breakpoints. If other elements are nested within the span and are to be clickable controls, they should have the footable-toggle class as shown here.

   <script type="text/javascript">
           $(function () {
                   $('.footable').footable({
                                             toggleHTMLElement: '<span><img src="img/plus.png" class="footable-toggle footable-expand" border="0" alt="Expand"><img src="img/minus.png" class="footable-toggle footable-contract" border="0" alt="Contract"></span>'
                                             });
           });
   </script>

Using Arbitrary Markup for the Toggler

By default, FooTable adds an empty <span> with the class "footable-toggle" to the cell that will show the expand/contract toggler, and adds the visual elements (usually icons) with CSS styles. You can override this by telling FooTable to insert some other HTML markup.

This approach was inspired by an accessibility review on one site that recommended using an inline image (not a background element) with appropriate ALT text so that the ALT text would be available to screen readers.

See the Setup tab for details.