Scroll to Top

Accordion

Displays collapsible content panels for presenting information in a limited amount of space. Use the backgound colors from defined color library of Material accordion. you can also use the grid system in the accordion-content and much more.

SITEMAP Documentation / Components / Accordion

Demo

Section 01

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur

Section 02

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur

Section 03

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur

Code copy

<div class="accordion">
                <a class="accordion-link grey3 pad-10 padX-15 border-lowdark text-grey8 hover-grey5 text-hover-grey10" data-target='#accordion-example-1'>Section 01</a>
                <div class="accordion-content grey4 text-grey8" id="accordion-example-1">
                    <div class="pad-15 pad-20">
                        <div class="row">
                            <div class="col m3 l3 s12">
                                <img src="1.png" class="img img-responsive">
                            </div>
                            <div class="col m9 l9 s12">
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <a class="accordion-link active grey3 pad-10 padX-15 borderB-lowdark borderX-lowdark text-grey8 hover-grey5 text-hover-grey10" data-target='#accordion-example-2'>Section 02</a>
                <div class="accordion-content grey4 text-grey8" id="accordion-example-2">
                    <div class="pad-15 pad-20">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
                    </div>
                </div>
                <a class="accordion-link grey3 pad-10 padX-15 borderB-lowdark borderX-lowdark text-grey8 hover-grey5 text-hover-grey10" data-target='#accordion-example-3'>Section 03</a>
                <div class="accordion-content grey4 text-grey8" id="accordion-example-3">
                    <div class="pad-15 pad-20">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur</p>
                    </div>
                </div>
            </div>

Feedback