QuickSelect Widget
This widget is a custom implementation of tabs functionality.
The actual <div> which contains the tabs, has to have a CSS-Class named quickselect-headline-wrapper.
The tabs will be identified by this CSS-Class. The content of the tabs has to be in a <div> which has to have
a CSS-Class called quickselect-content-wrapper. The elements inside, have to be in the same order as the tabs.
Widget Instance Options
Tab alignment | data-quickselect-align | string | Optional
This option can be used to align the tabs (not the content). In some cases it is necessary to align th tabs itself to righ right.
Start tab | data-quickselect-start | integer | Optional
This option can be used to choose a starting tab. Mind that 0 is associated with the first tab content.
Example
<div data-gx-widget="quickselect" data-quickselect-align="left" data-quickselect-start="1">
<!-- Tabs -->
<div class="quickselect-headline-wrapper">
<a href="#tab1">Tab #1</a>
<a href="#tab2">Tab #2</a>
<a href="#tab3">Tab #3</a>
</div>
<!-- Content -->
<div class="quickselect-content-wrapper">
<div>Content of tab #1.</div>
<div>Content of tab #2.</div>
<div>Content of tab #3.</div>
</div>
</div>