Accordions

Customer Service Accordion

HTML5
To create an accordion as displayed under customer service, insert the following code where you want it displayed.
To get the styling as displayed under the content tab, you will have to include all the class's as listed below.

To get the close/open function to work, you have to add data-toggle="collapse" inside the a tag, which you find right beneath the <div class="service-category">.

<div class="customer-service-categories">
    <!-- Category -->
    <div class="service-category">
        <div class="category-header">
            <a data-toggle="collapse" data-parent="#customer-service-categories" href="#service-category-1" class="" aria-expanded="true">
                <div class="service-category-icon">
                    <svg class="icon-help"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/icons/icons.svg#icon-customer-service"></use></svg>
                </div>
                <span>Click here to open and close...</span>
            </a>
        </div>
        <div id="service-category-1" class="collapse in" aria-expanded="true">
            <div class="content">
                <div class="row">
                    <div class="col-xs-12">

                        <!-- List start -->
                        <ul>
                            <li><a href="#">Customer service question example...?</a></li>
                            <li><a href="#">Customer service question example...?</a></li>
                            <li><a href="#">Customer service question example...?</a></li>
                            <li><a href="#">Customer service question example...?</a></li>
                            <li><a href="#">Customer service question example...?</a></li>
                            <li><a href="#">Customer service question example...?</a></li>
                        </ul>
                    
                    </div>
                    <div class="col-xs-12">
                        <div class="service-category-footer">
                            <a href="#" class="btn primary see-all">See all</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Product Video Accordion

Kort beskrivelse

Display video here

HTML5
To create a product video accordion, insert the following code where you want it displayed.
To get the styling as displayed under the content tab, you will have to include all the class's as listed below.

To get the close/open function to work, you have to add data-toggle="collapse" inside the a tag, which you find right beneath the <div class="panel">.

You can insert as many accordions as you like by copying the <div class="panel"> with all it's child elements, and insert it below one of the others.

<!-- Accordion -->
<div class="accordion-list" role="tablist" aria-multiselectable="true">
    <!-- Panel -->
    <div class="panel">
        <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">
            Video #1
        </a>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-expanded="false" style="height: 0px;">
            <div class="panel-body">
                <p>Short desciption</p>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="video-wrapper">Display video here</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Panel -->
    <div class="panel">
        <a class="collapsed" role="button" data-toggle="collapse" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
            Video #2
        </a>
        <div id="collapseFive" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <p>Kort beskrivelse</p>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="video-wrapper">Display video here</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End accordion -->