HTML5, CSS3 & JS Experiments

By Martin Ivanov

Panel Bar

X-Panel is a HTML5 Web Component, built on top of Mozilla's X-Tags which makes possible the creation of full-featured panel bars and drawers fun and without any JavaScript as simple custom tags:

<acidjs-xpanel width="60%" multiple>
    <acidjs-xpanel-drawer icon="icons/downloads.png" label="Downloads" open>
            Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/email.png" label="Messages" disabled>
            Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/calendar.png" label="Calendar">
            Drawer content...
    </acidjs-xpanel-drawer>
</acidjs-xpanel>

Demo

Single Expanded Item at a Time, Percentage Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multiple Expanded Items at a Time, Auto Width, Custom Expand/Collapse Hints

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

No Icons, Multiple Expanded, Fixed Width and Height

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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Default Expanded Items (Multiple Expanded at a Time), Fixed Panel Width and Fixed Drawer Height

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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 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. 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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Default Expanded Items (Single Expanded at a Time), Fixed Width

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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 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. 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

Default Expanded Items (Single Expanded at a Time), Fixed Width

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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 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. 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

Locked (Disabled) Drawers

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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 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. 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

Nested Panels

X-Panel also supports unlimited level of nested panels and drawers.

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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 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. 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 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 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 magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XPanel/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XPanel/classes/XPanel.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
            <h4>Single Expanded Item at a Time, Percentage Width</h4>
            
            <acidjs-xpanel width="60%">
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/downloads.png" label="Downloads">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
                    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
                    irure dolor in reprehenderit in voluptate velit esse cillum 
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/email.png" label="Messages">
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/calendar.png" label="Calendar">
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum.
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
            <br />
            <h4>Multiple Expanded Items at a Time, Auto Width, Custom Expand/Collapse Hints</h4>
            
            <acidjs-xpanel multiple>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/html5.png" hint="Click to expand/collapse" label="HTML5">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
                    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
                    irure dolor in reprehenderit in voluptate velit esse cillum 
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/css3.png" hint="Click to learn more about CSS3" label="CSS3">
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
            <br />
            <h4>No Icons, Multiple Expanded, Fixed Width and Height</h4>
            
            <acidjs-xpanel multiple width="400" height="200">
                <acidjs-xpanel-drawer label="Home">
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer label="About Us" open>
                    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer label="News">
                    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.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer label="Contact Us">
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum.
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
            <br />
            <h4>Default Expanded Items (Multiple Expanded at a Time), Fixed Panel Width and Fixed Drawer Height</h4>
            
            <acidjs-xpanel multiple width="400">
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/pdf.png" label="PDF Files" height="100" open>
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/doc.png" label="MS Word Documents" height="100" open>
                    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.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/xls.png" label="MS Excel Sheets" height="80" open>
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/txt.png" label="Text Files">
                    Nemo enim ipsam voluptatem quia voluptas 
                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
            <br />
            <h4>Default Expanded Items (Single Expanded at a Time), Fixed Width</h4>
            
            <acidjs-xpanel width="600">
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/pdf.png" label="PDF Files" open>
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/doc.png" label="MS Word Documents">
                    Nemo enim ipsam voluptatem quia voluptas 
                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/xls.png" label="MS Excel Sheets">
                    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.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/txt.png" label="Text Files">
                    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
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
            <br />
            <h4>Default Expanded Items (Single Expanded at a Time), Fixed Width</h4>
            
            <acidjs-xpanel width="600">
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/pdf.png" label="PDF Files" open>
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/doc.png" label="MS Word Documents">
                    Nemo enim ipsam voluptatem quia voluptas 
                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/xls.png" label="MS Excel Sheets">
                    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.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/txt.png" label="Text Files">
                    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
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
            <br />
            <h4>Locked (Disabled) Drawers</h4>
            
            <acidjs-xpanel multiple>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/pdf.png" label="PDF Files (this one is locked)" open disabled>
                    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 magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/doc.png" label="MS Word Documents">
                    Nemo enim ipsam voluptatem quia voluptas 
                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
                    dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                    quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                    reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                    consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/xls.png" label="MS Excel Sheets (this one is locked)" disabled>
                    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.
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/txt.png" label="Text Files">
                    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
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
            <br />
            <h4>Nested Panels</h4>
            <p>X-Panel also supports unlimited level of nested panels and drawers.</p>
            
            <acidjs-xpanel width="600">
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/file.png" label="File Repository" open>
                    <acidjs-xpanel>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/pdf.png" label="PDF Files">
                            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 magni 
                            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                            adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                            labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                            veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                            reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                        </acidjs-xpanel-drawer>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/doc.png" label="MS Word Documents">
                            Nemo enim ipsam voluptatem quia voluptas 
                            sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
                            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                            adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                            labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                            veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                            reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                        </acidjs-xpanel-drawer>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/xls.png" label="MS Excel Sheets">
                            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.
                        </acidjs-xpanel-drawer>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/txt.png" label="Text Files">
                            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
                        </acidjs-xpanel-drawer>
                    </acidjs-xpanel>
                </acidjs-xpanel-drawer>
                <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/software.png" label="Programming Languages">
                    <acidjs-xpanel>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/html5-16.png" label="HTML5">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
                            do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
                            irure dolor in reprehenderit in voluptate velit esse cillum 
                            dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
                            cupidatat non proident, sunt in culpa qui officia deserunt 
                            mollit anim id est laborum.
                        </acidjs-xpanel-drawer>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/css3-16.png" label="CSS3">
                            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 magni 
                            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                            adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                            labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                            veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                            reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                        </acidjs-xpanel-drawer>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/js.png" label="JavaScript">
                            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 magni 
                            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                            adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                            labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                            veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                            reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                        </acidjs-xpanel-drawer>
                        <acidjs-xpanel-drawer icon="pages/x-panel-html5-web-component/example/icons/php.png" label="PHP">
                            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 magni 
                            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
                            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
                            adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
                            labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
                            veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, 
                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
                            reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
                            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                        </acidjs-xpanel-drawer>
                    </acidjs-xpanel>
                </acidjs-xpanel-drawer>
            </acidjs-xpanel>
            
        
/*
 * X-Panel HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/wemakesitesnet
 * @url developer blog http://martinivanov.net/
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/

acidjs-xpanel,
acidjs-xpanel-drawer,
acidjs-xpanel > label
{
    display: block;
    box-sizing: border-box;
}

acidjs-xpanel-drawer,
acidjs-xpanel > input,
acidjs-xpanel > input + label::after
{
    position: absolute;
}

acidjs-xpanel > input,
acidjs-xpanel-drawer
{
    clip: rect(0, 0, 0, 0);
}

acidjs-xpanel-drawer,
acidjs-xpanel > label span
{
    font: normal 12px/16px Helvetica, Arial, Sans-serif;
}

acidjs-xpanel > label *,
acidjs-xpanel > input + label::after
{
    display: inline-block;
}

acidjs-xpanel > label img,
acidjs-xpanel > label span
{
    margin: 4px;
}

acidjs-xpanel > label:hover,
acidjs-xpanel > input:checked:not(:disabled) + label
{
    background: #ccc;
    color: #333;
}

acidjs-xpanel,
acidjs-xpanel-drawer
{
    overflow: auto;
}

acidjs-xpanel > input:disabled + label
{
    opacity: .5;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

acidjs-xpanel > input:checked:not(:disabled) + label + acidjs-xpanel-drawer
{
    border-color: #bdbdbd;
}

acidjs-xpanel-drawer
{
    border: solid 1px rgba(255, 255, 255, 0);
    border-left: 0;
    border-right: 0;
    padding: 4px;
    cursor: default;
    opacity: 0;
    transition: opacity .2s ease-in;
    background: #e6e6e6;
}

acidjs-xpanel-drawer:last-child
{
    border-bottom: 0;
}

acidjs-xpanel > input
{
    outline: 0;
}

acidjs-xpanel
{
    border: solid 1px #bdbdbd;
    visibility: hidden;
}

acidjs-xpanel > label *
{
    vertical-align: middle;
    white-space: nowrap;
}

acidjs-xpanel > label
{
    position: relative;
    cursor: pointer;
    color: #666;
    transition: all .2s ease-in;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xpanel > label span
{
    text-overflow: ellipsis;
    overflow: hidden;
}

acidjs-xpanel > label img + span
{
    margin-left: 0;
}

acidjs-xpanel > input:checked:not(:disabled) + label + acidjs-xpanel-drawer
{
    position: static;
    opacity: 1;
}

acidjs-xpanel > input + label::after
{
    content: "\25b6";
    top: 50%;
    right: 0;
    margin: -8px 0 0 0;
    width: 16px;
    height: 16px;
    font-size: 9px;
    font-weight: bold;
    line-height: 16px;
    transition: transform .2s ease-in;
    text-align: center;
}

acidjs-xpanel > input:checked:not(:disabled) + label::after
{
    content: "\25bc";
}

Please, disable your ad blocker

This website is made possible by displaying online advertisements to the visitors. To view the content, please, disable your ad blocker, then refresh the page.