@krisdages/aurelia-bootstrap/doc/src/accordion/accordion.html

Bootstrap components written in Aurelia.

<template>
    <div class="container-fluid">
        <div class="page-header">
            <a class="btn btn-default pull-right" target="_blank"
               href="https://github.com/tochoromero/aurelia-bootstrap/tree/master/doc/src/accordion">
                <i class="fa fa-edit"></i> Improve documentation</a>
            <h1>Accordion</h1>
        </div>

        <div class="row">
            <div class="col-sm-6 col-xs-12">
                <p>
                    <a class="btn btn-default" aubs-btn-checkbox="state.bind: closeOthers">Close Others</a>
                    <a class="btn btn-default" aubs-btn-checkbox="state.bind: firstTabState">Toggle First</a>
                    <a class="btn btn-default" aubs-btn-checkbox="state.bind: secondDisabled">Disable Second</a>
                </p>


                <aubs-accordion close-others.bind="closeOthers">
                    <aubs-accordion-group title="Collapsible Group Item #1" is-open.bind="firstTabState">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
                        aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                        sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
                        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                        Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                        accusamus labore sustainable VHS.
                    </aubs-accordion-group>

                    <aubs-accordion-group title="Collapsible Group Item #2" disabled.bind="secondDisabled">
                        You can disable the panel header preventing the item to be manually toggled.
                    </aubs-accordion-group>

                    <aubs-accordion-group title="Markup Title <i class='fa fa-heart'></i>">
                        You can use html markup in the Acoordion group title.
                    </aubs-accordion-group>

                    <aubs-accordion-group title="With Panel Class" panel-class="panel-danger">
                        You can specify the class for the panel in the accordion group.
                    </aubs-accordion-group>

                    <aubs-accordion-group>
                        <template replace-part="header">
                            <h4 class="panel-title">
                                <a click.delegate="toggle()">
                                    Replaceable Header <i class="fa fa-star"></i>
                                </a>

                                <div class="pull-right">
                                    <button class="btn btn-danger btn-xs" click.delegate="deleteItem()"><i class="fa fa-trash"></i></button>
                                </div>
                            </h4>
                        </template>
                        You can replace the Accordion Group Header.
                    </aubs-accordion-group>
                </aubs-accordion>
            </div>

            <div class="col-sm-6 col-xs-12">
                <p>The <code>aubs-accordion</code> and <code>aubs-accordion-group</code> custom elements allow you to easily organize your
                    content in panels that collapse and expand with a click.</p>

                <h3>aubs-accordion</h3>
                <p>This custom element is a wrapper for all of the accordion groups. It has a single setting:</p>
                <ul>
                    <li><code>close-others</code>
                        <boolean></boolean>
                        <i>(default: true)</i>: Boolean that determines whether or not we should close all the other items when one is
                        opened.
                    </li>
                </ul>

                <h3>aubs-accordion-group</h3>
                <p>Represents one item in the accordion, it must be a direct descendant of <code>aubs-accordion</code>. The inner html of
                    the Custom Element will be transcluded into the collapsable section of the panel. Its properties are:</p>
                <ul>
                    <li><code>title</code>
                        <string></string>
                        <markup></markup>
                        <i>(required)</i>: This String will be the clickable text for the panel header. You can provided
                        html markup.
                    </li>
                    <li><code>panel-class</code>
                        <string></string>
                        <i>(default: panel-default)</i>: This is the css class for the panel. It needs to be a
                        Bootstrap
                        panel class. <br/>
                        <strong>Note:</strong> In bootstrap 4 mode this property is ignored.
                    </li>
                    <li><code>is-open</code>
                        <property></property>
                        <boolean property.bind="true"></boolean>
                        <two-way></two-way>
                        <i>(default: false)</i>: Reflects the state of the item. You can use this property to programmatically toggle one
                        item.
                    </li>
                    <li><code>disabled</code>
                        <boolean></boolean>
                        <i>(default: false)</i>: Boolean that determines if the item is disabled. A disabled item
                        cannot be manually toggled, but it can still be programmatically toggled.
                    </li>
                </ul>

                <h4>Replaceable Header</h4>
                <p>Instead of using the <code>title</code> property you can provide a template to replace the whole header with your own.
                </p>

                <p>To replace the header, you need to provide a template with the property <code>replace-part="header"</code> inside your
                    <code>aubs-accordiong-group</code>. The content inside the template will be projected into the header.
                </p>

                <p>The template you provide has access to the following:</p>
                <ul>
                    <li><code>toggle()</code>: This is the function that toggles the accordion. You must provide an element that calls this
                        function otherwise you will not be able to toggle the accordion.
                    </li>
                    <li><code>disabled</code>: This is a boolean that indicates whether or not the accordion group is disabled. You may want
                        to use this property to change the state of you header.
                    </li>
                </ul>

                <p>For reference, the following is the markup you will be replacing: </p>
                <pre><code class="language-markup" au-syntax>&lt;h4 class="panel-title">
    &lt;a href="javascript:void(0)" innerHTML.bind="title"
                    click.delegate="toggle()" show.bind="!disabled">&lt;/a>
    &lt;span class="text-muted" innerHTML.bind="title" show.bind="disabled">&lt;/span>
&lt;/h4></code></pre>
            </div>

            <div class="col-xs-12">
                <hr>

                <aubs-tabset>
                    <aubs-tab header="HTML">
            <pre><code class="language-markup" au-syntax>&lt;template>
    &lt;p>
        &lt;a class="btn btn-default" aubs-btn-checkbox="state.bind: closeOthers">Close Others&lt;/a>
        &lt;a class="btn btn-default" aubs-btn-checkbox="state.bind: firstTabState">Toggle First&lt;/a>
        &lt;a class="btn btn-default" aubs-btn-checkbox="state.bind: secondDisabled">Disable Second&lt;/a>
    &lt;/p>

    &lt;aubs-accordion close-others.bind="closeOthers">
        &lt;aubs-accordion-group title="Collapsible Group Item #1" is-open.bind="firstTabState">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
            helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
            Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
            accusamus labore sustainable VHS.
        &lt;/aubs-accordion-group>

        &lt;aubs-accordion-group title="Collapsible Group Item #2" disabled.bind="secondDisabled">
            You can disable the panel header preventing the item to be manually toggled.
        &lt;/aubs-accordion-group>

        &lt;aubs-accordion-group title="Markup Title &lt;i class='fa fa-heart'>&lt;/i>">
            You can use html markup in the Acoordion group title.
        &lt;/aubs-accordion-group>

        &lt;aubs-accordion-group title="With Panel Class" panel-class="panel-danger">
            You can specify the class for the panel in the accordion group.
        &lt;/aubs-accordion-group>
                
        &lt;aubs-accordion-group>
            &lt;template replace-part="header">
                &lt;h4 class="panel-title">
                    &lt;a click.delegate="toggle()">
                        Replaceable Header &lt;i class="fa fa-star">&lt;/i>
                    &lt;/a>

                    &lt;div class="pull-right">
                        &lt;button class="btn btn-danger btn-xs" click.delegate="deleteItem()">
                            &lt;i class="fa fa-trash">&lt;/i>
                        &lt;/button>
                    &lt;/div>
                &lt;/h4>
            &lt;/template>
            You can replace the Accordion Group Header.
        &lt;/aubs-accordion-group>
    &lt;/aubs-accordion>
&lt;/template></code></pre>
                    </aubs-tab>
                    <aubs-tab header="JS">
<pre><code class="language-js" au-syntax>export class Example {
    closeOthers = true;

    deleteItem(){
        alert('Deleting item');
    }
}</code></pre>
                    </aubs-tab>
                </aubs-tabset>

            </div>
        </div>
    </div>
</template>