soc-core/src/html/elements/components_accordion.html

Core sass framework based on Bootstrap

<a name="socaccordion"></a>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="page-header">
                <h1>Soc Accordion <small>Not your average instrument
                    <span class="label label-success">Continue grid</span>
                    <span class="label label-default">Wrap</span>                    
                    <span class="label label-warning">JS</span>    
                </small></h1>
            </div>
        </div>

        <div class="col-xs-12">
            <p>The Soc Accordion is a basic accordion built upon Bootstrap. In short it is nothing more than a collection of
                divs containing the panel class within a soc-accordion div. A panel contains a panel-heading and a panel-body,
                see the emmet for more details about this structure.</p>
            <p>An important thing to notice is that when it is used without a javascript framework like Angular, the data-*
                attributes are required on the header to make the accordion interactive. The following attributes are required:</p>
                <ul>
                    <li>data-toggle="collapse"</li>
                    <li>data-parent="#id" => points to the id of the soc-accordion, required for closing other panels when opening this one</li>
                    <li>data-target"#id" => points to the id of the panel which should collapse</li>
                </ul>

        </div>

        <div class="col-sm-12">
            <div class="soc-accordion" id="accordion">
                <div class="panel">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#panel1">
                            Panel 1
                        </h4>
                    </div>
                    <div id="panel1" class="collapse in">
                        <div class="panel-body">
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#panel2">
                            Panel 2
                        </h4>
                    </div>
                    <div id="panel2" class="collapse">
                        <div class="panel-body">
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#panel3">
                            Panel 3
                        </h4>
                    </div>
                    <div id="panel3" class="collapse">
                        <div class="panel-body">
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="well"><span>emmet:
                <pre><code>.soc-accordion#accordion>(.panel>.panel-heading>h4.panel-title[data-toggle="collapse" data-target="#panel$" data-parent="#accordion"]{Panel Title $}^div.collapse#panel$>div.panel-body>p)*3</code></pre>
            </span></div>
        </div>


    </div>
</div>