Button Toggles

Button Toggles use the Bootstrap Collapse component and, like accordions, include open and close icons, and right-to-left support.

                                
                                    <div class="btn-toggle">
                                        <button class="btn btn-block btn-lg btn-secondary text-white" data-toggle="collapse" data-target="#toggle-target" aria-expanded="false" aria-controls="toggle-target">
                                            <span class="title">Title</span>
                                        </button>
                                    </div>

                                    <nav class="collapse bg-light p-2" id="toggle-target" role="navigation">
                                        <ul class="extensible-list">
                                            <li>
                                                <a class="active" href="#" title="Link">Link</a>
                                            </li>
                                            <li>
                                                <a href="#" title="Link">Link</a>
                                            </li>
                                            <li>
                                                <a href="#" title="Link">Link</a>
                                            </li>
                                        </ul>
                                    </nav>
                                
                            

The Sass for Button Toggle can be found (coupled with Accordions) in scss/_f-layout-elements.scss under J. Accordion and button toggle.