# IOptionButton

## Content

<div class="docapp-java-api-doc-main"><style>:not(h1, h2, h3, h4, h5, h6)>code,
:not(h1, h2, h3, h4, h5, h6)>tt {
    font-size: 14px;
    padding-top: 4px;
    margin-top: 8px;
    line-height: 1.4em;
}

.summary-table dt code {
    font-size: 14px;
    vertical-align: top;
    padding-top: 4px;
}

.tab {
    background-color: #0066FF;
    color: #ffffff;
    padding: 8px;
    width: 5em;
    font-weight: bold;
}

/*
 * Styles for page header and footer.
 */
.title {
    color: #2c4557;
    margin: 10px 0;
}

.sub-title {
    margin: 5px 0 0 0;
}

.header ul {
    margin: 0 0 15px 0;
    padding: 0;
}

.header ul li,
.footer ul li {
    list-style: none;
}

/*
 * Styles for headings.
 */
.summary h2,
.details h2,
h2,
.block-list h2 {
    padding: 0;
    margin: 15px 0;
}

.summary h3,
.details h3,
.summary .inherited-list h2 {
    background-color: var(--ds-product-color);
    color: #fff;
    border: 1px solid #d0d9e0;
    padding: 7px 5px;
}

.summary h3 a,
.details h3 a,
.summary .inherited-list h2 a {
    color: #fff !important;
}
/*
 * Styles for page layout containers.
 */
dl.notes>dt {
    font-size: 12px;
    font-weight: bold;
    margin: 10px 0 0 0;
    color: #4E4E4E;
}

dl.notes>dd {
    margin: 5px 10px 10px 0;
    font-size: 14px;
}

dl.name-value>dt {
    margin-left: 1px;
    font-size: 1.1em;
    display: inline;
    font-weight: bold;
}

dl.name-value>dd {
    margin: 0 0 0 1px;
    font-size: 1.1em;
    display: inline;
}

/*
 * Styles for lists.
 */
li.circle {
    list-style: circle;
}

ul.horizontal li {
    display: inline;
    font-size: 0.9em;
}

div.inheritance {
    margin: 0;
    padding: 0;
}

div.inheritance div.inheritance {
    margin-left: 2em;
}

ul.block-list,
ul.details-list,
ul.member-list,
ul.summary-list {
    margin: 10px 0 10px 0;
    padding: 0;
}

ul.block-list>li,
ul.details-list>li,
ul.member-list>li,
ul.summary-list>li {
    list-style: none;
    margin-bottom: 15px;
    line-height: 1.4;
}

.summary-table dl,
.summary-table dl dt,
.summary-table dl dd {
    margin-top: 0;
    margin-bottom: 1px;
}

ul.see-list,
ul.see-list-long {
    padding-left: 0;
    list-style: none;
}

ul.see-list li {
    display: inline;
}

ul.see-list li:not(:last-child):after,
ul.see-list-long li:not(:last-child):after {
    content: ", ";
    white-space: pre-wrap;
}

/*
 * Styles for tables.
 */
.summary-table,
.details-table {
    width: 100%;
    border-spacing: 0;
    border-left: 1px solid #EEE;
    border-right: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    padding: 0;
}

.caption {
    position: relative;
    text-align: left;
    background-repeat: no-repeat;
    color: #253441;
    font-weight: bold;
    clear: none;
    overflow: hidden;
    padding: 0;
    padding-top: 10px;
    padding-left: 1px;
    margin: 0;
    white-space: pre;
}

.caption a:link,
.caption a:visited {
    color: #1f389c;
}

.caption a:hover,
.caption a:active {
    color: #FFFFFF;
}

.caption span {
    white-space: nowrap;
    padding-top: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 7px;
    display: inline-block;
    background-color: var(--ds-product-color);
    color: #fff;
    border: none;
}

div.table-tabs {
    padding: 10px 0 0 1px;
    margin: 0;
}

div.table-tabs>button {
    border: none;
    cursor: pointer;
    padding: 5px 12px 7px 12px;
    font-weight: bold;
    margin-right: 3px;
}

div.table-tabs>button.active-table-tab {
    background: var(--ds-product-color);
    color: #fff;
}

div.table-tabs>button.table-tab {
    background: var(--ds-product-color);
    color: #FFFFFF;
    border-bottom: 1px solid #eee;
}

.two-column-summary {
    display: grid;
    grid-template-columns: minmax(15%, max-content) minmax(15%, auto);
}

.three-column-summary {
    display: grid;
    grid-template-columns: minmax(10%, max-content) minmax(15%, max-content) minmax(15%, auto);
}

.four-column-summary {
    display: grid;
    grid-template-columns: minmax(10%, max-content) minmax(10%, max-content) minmax(10%, max-content) minmax(10%, auto);
}

@media screen and (max-width: 600px) {
    .two-column-summary {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 800px) {
    .three-column-summary {
        display: grid;
        grid-template-columns: minmax(10%, max-content) minmax(25%, auto);
    }

    .three-column-summary .col-last {
        grid-column-end: span 2;
    }
}

@media screen and (max-width: 1000px) {
    .four-column-summary {
        display: grid;
        grid-template-columns: minmax(15%, max-content) minmax(15%, auto);
    }
}

.summary-table>div,
.details-table>div {
    text-align: left;
    padding: 8px 3px 3px 7px;
}

.col-first,
.col-second,
.col-last,
.col-constructor-name,
.col-summary-item-name {
    vertical-align: top;
    padding-right: 0;
    padding-top: 8px;
    padding-bottom: 3px;
}

.table-header {
    background: var(--ds-product-color);
    color: #fff;
    font-weight: bold;
}

.col-first,
.col-first {
    font-size: 13px;
}

.col-second,
.col-second,
.col-last,
.col-constructor-name,
.col-summary-item-name,
.col-last {
    font-size: 13px;
}

.col-first,
.col-second,
.col-constructor-name {
    vertical-align: top;
    overflow: auto;
}

.col-last {
    white-space: normal;
}

.col-first a:link,
.col-first a:visited,
.col-second a:link,
.col-second a:visited,
.col-first a:link,
.col-first a:visited,
.col-second a:link,
.col-second a:visited,
.col-constructor-name a:link,
.col-constructor-name a:visited,
.col-summary-item-name a:link,
.col-summary-item-name a:visited,
.constant-values-container a:link,
.constant-values-container a:visited,
.all-classes-container a:link,
.all-classes-container a:visited,
.all-packages-container a:link,
.all-packages-container a:visited {
    font-weight: bold;
}

.table-sub-heading-color {
    background-color: #EEEEFF;
}

.even-row-color,
.even-row-color .table-header {
    background-color: #FFFFFF;
}

.odd-row-color,
.odd-row-color .table-header {
    background-color: #EEEEEF;
}

/*
 * Styles for contents.
 */
.deprecated-content {
    margin: 0;
    padding: 10px 0;
}

div.block {
    font-size: 14px;
}

.col-last div {
    padding-top: 0;
}

.col-last a {
    padding-bottom: 3px;
}

.module-signature,
.package-signature,
.type-signature,
.member-signature {
    font-size: 14px;
    margin: 14px 0;
    white-space: pre-wrap;
}

.module-signature,
.package-signature,
.type-signature {
    margin-top: 0;
}

.member-signature .type-parameters-long,
.member-signature .parameters,
.member-signature .exceptions {
    display: inline-block;
    vertical-align: top;
    white-space: pre;
}

.member-signature .type-parameters {
    white-space: normal;
}

/*
 * Styles for formatting effect.
 */
.source-line-no {
    color: green;
    padding: 0 30px 0 0;
}

h1.hidden {
    visibility: hidden;
    overflow: hidden;
    font-size: 10px;
}

.block {
    display: block;
    margin: 0 10px 5px 0;
    color: #474747;
}

.deprecated-label,
.descfrm-type-label,
.implementation-label,
.member-name-label,
.member-name-link,
.module-label-in-package,
.module-label-in-type,
.override-specify-label,
.package-label-in-type,
.package-hierarchy-label,
.type-name-label,
.type-name-link,
.search-tag-link,
.preview-label {
    font-weight: bold;
}

.deprecation-block {
    font-size: 14px;
    border-style: solid;
    border-width: thin;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    display: inline-block;
}

.preview-block {
    font-size: 14px;
    border-style: solid;
    border-width: thin;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    display: inline-block;
}

/*
 * Styles for user-provided tables.
 *
 * borderless:
 *      No borders, vertical margins, styled caption.
 *      This style is provided for use with existing doc comments.
 *      In general, borderless tables should not be used for layout purposes.
 *
 * plain:
 *      Plain borders around table and cells, vertical margins, styled caption.
 *      Best for small tables or for complex tables for tables with cells that span
 *      rows and columns, when the "striped" style does not work well.
 *
 * striped:
 *      Borders around the table and vertical borders between cells, striped rows,
 *      vertical margins, styled caption.
 *      Best for tables that have a header row, and a body containing a series of simple rows.
 */

table.borderless,
table.plain,
table.striped {
    margin-top: 10px;
    margin-bottom: 10px;
}

table.borderless>caption,
table.plain>caption,
table.striped>caption {
    font-weight: bold;
    font-size: smaller;
}

table.borderless th,
table.borderless td,
table.plain th,
table.plain td,
table.striped th,
table.striped td {
    padding: 2px 5px;
}

table.borderless,
table.borderless>thead>tr>th,
table.borderless>tbody>tr>th,
table.borderless>tr>th,
table.borderless>thead>tr>td,
table.borderless>tbody>tr>td,
table.borderless>tr>td {
    border: none;
}

table.borderless>thead>tr,
table.borderless>tbody>tr,
table.borderless>tr {
    background-color: transparent;
}

table.plain {
    border-collapse: collapse;
    border: 1px solid black;
}

table.plain>thead>tr,
table.plain>tbody tr,
table.plain>tr {
    background-color: transparent;
}

table.plain>thead>tr>th,
table.plain>tbody>tr>th,
table.plain>tr>th,
table.plain>thead>tr>td,
table.plain>tbody>tr>td,
table.plain>tr>td {
    border: 1px solid black;
}

table.striped {
    border-collapse: collapse;
    border: 1px solid black;
}

table.striped>thead {
    background-color: #E3E3E3;
}

table.striped>thead>tr>th,
table.striped>thead>tr>td {
    border: 1px solid black;
}

table.striped>tbody>tr:nth-child(even) {
    background-color: #EEE
}

table.striped>tbody>tr:nth-child(odd) {
    background-color: #FFF
}

table.striped>tbody>tr>th,
table.striped>tbody>tr>td {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

table.striped>tbody>tr>th {
    font-weight: normal;
}
</style><h1>Interface IOptionButton</h1>
<!-- ======== START OF CLASS DATA ======== -->

<section class="class-description" id="class-description">
<dl class="notes">
<dt>All Superinterfaces:</dt>
<dd><code><a href="ICellLinkControl.html" title="interface in com.grapecity.documents.excel.forms">ICellLinkControl</a></code>, <code><a href="ICellLinkControlT.html" title="interface in com.grapecity.documents.excel.forms">ICellLinkControlT</a>&lt;<a class="external-link" href="https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Boolean.html" title="class or interface in java.lang">Boolean</a>&gt;</code>, <code><a href="IContentControl.html" title="interface in com.grapecity.documents.excel.forms">IContentControl</a></code>, <code><a href="IControl.html" title="interface in com.grapecity.documents.excel.forms">IControl</a></code>, <code><a href="IControlT.html" title="interface in com.grapecity.documents.excel.forms">IControlT</a>&lt;<a href="IOptionButton.html" title="interface in com.grapecity.documents.excel.forms">IOptionButton</a>&gt;</code></dd>
</dl>
<hr>
<div class="type-signature"><span class="modifiers">public interface </span><span class="element-name type-name-label">IOptionButton</span><span class="extends-implements">
extends <a href="IControlT.html" title="interface in com.grapecity.documents.excel.forms">IControlT</a>&lt;<a href="IOptionButton.html" title="interface in com.grapecity.documents.excel.forms">IOptionButton</a>&gt;, <a href="IContentControl.html" title="interface in com.grapecity.documents.excel.forms">IContentControl</a>, <a href="ICellLinkControlT.html" title="interface in com.grapecity.documents.excel.forms">ICellLinkControlT</a>&lt;<a class="external-link" href="https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Boolean.html" title="class or interface in java.lang">Boolean</a>&gt;</span></div>
<div class="block">Represents an option button control. <p>An option button lets users select a single choice from a group of mutually exclusive options.  Option buttons are grouped by the containing  <a href="IGroupBox.html" title="interface in com.grapecity.documents.excel.forms"><code>IGroupBox</code></a>. Option buttons in the same group  share the linked cell value and update each other's selection state. If an option button is not  contained in any group box, it belongs to the default group on the worksheet.</p>
<pre><code data-language="Java">
 IGroupBox groupBox = worksheet.getControls().addGroupBox(20, 20, 120, 80);
 groupBox.setText("Shipping");
 IOptionButton standard = worksheet.getControls().addOptionButton(30, 40, 90, 18);
 standard.setText("Standard");
 standard.setLinkedCell(worksheet.getRange("B1"));
 standard.setIsChecked(true);
 </code></pre></div>
</section>
<section class="summary">
<ul class="summary-list">
<!-- ========== METHOD SUMMARY =========== -->
<li>
<section class="method-summary" id="method-summary">
<h2>Method Summary</h2>
<div id="method-summary-table">
<div aria-orientation="horizontal" class="table-tabs" role="tablist"><button aria-controls="method-summary-table.tabpanel" aria-selected="true" class="active-table-tab" id="method-summary-table-tab0" onclick="show('method-summary-table', 'method-summary-table', 3)" onkeydown="switchTab(event)" role="tab" tabindex="0">All Methods</button><button aria-controls="method-summary-table.tabpanel" aria-selected="false" class="table-tab" id="method-summary-table-tab2" onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" onkeydown="switchTab(event)" role="tab" tabindex="-1">Instance Methods</button><button aria-controls="method-summary-table.tabpanel" aria-selected="false" class="table-tab" id="method-summary-table-tab3" onclick="show('method-summary-table', 'method-summary-table-tab3', 3)" onkeydown="switchTab(event)" role="tab" tabindex="-1">Abstract Methods</button></div>
<div id="method-summary-table.tabpanel" role="tabpanel">
<div aria-labelledby="method-summary-table-tab0" class="summary-table three-column-summary">
<div class="table-header col-first">Modifier and Type</div>
<div class="table-header col-second">Method</div>
<div class="table-header col-last">Description</div>
<div class="col-first even-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3"><code><a href="IGroupBox.html" title="interface in com.grapecity.documents.excel.forms">IGroupBox</a></code></div>
<div class="col-second even-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3"><code><a class="member-name-link" href="#getGroupBox()">getGroupBox</a>()</code></div>
<div class="col-last even-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3">
<div class="block">Gets the first group box that contains the option button.</div>
</div>
<div class="col-first odd-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3"><code>boolean</code></div>
<div class="col-second odd-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3"><code><a class="member-name-link" href="#getIsChecked()">getIsChecked</a>()</code></div>
<div class="col-last odd-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3">
<div class="block">Gets whether the  <a href="IOptionButton.html" title="interface in com.grapecity.documents.excel.forms"><code>IOptionButton</code></a> is checked.</div>
</div>
<div class="col-first even-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3"><code>void</code></div>
<div class="col-second even-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3"><code><a class="member-name-link" href="#setIsChecked(boolean)">setIsChecked</a><wbr>(boolean&nbsp;value)</code></div>
<div class="col-last even-row-color method-summary-table method-summary-table-tab2 method-summary-table-tab3">
<div class="block">Sets whether the  <a href="IOptionButton.html" title="interface in com.grapecity.documents.excel.forms"><code>IOptionButton</code></a> is checked.</div>
</div>
</div>
</div>
</div>
<div class="inherited-list">
<h3 id="methods-inherited-from-class-com.grapecity.documents.excel.forms.ICellLinkControl">Methods inherited from interface&nbsp;com.grapecity.documents.excel.forms.<a href="ICellLinkControl.html" title="interface in com.grapecity.documents.excel.forms">ICellLinkControl</a></h3>
<code><a href="ICellLinkControl.html#getDisplay3DShading()">getDisplay3DShading</a>, <a href="ICellLinkControl.html#getLinkedCell()">getLinkedCell</a>, <a href="ICellLinkControl.html#setDisplay3DShading(boolean)">setDisplay3DShading</a>, <a href="ICellLinkControl.html#setLinkedCell(com.grapecity.documents.excel.IRange)">setLinkedCell</a></code></div>
<div class="inherited-list">
<h3 id="methods-inherited-from-class-com.grapecity.documents.excel.forms.ICellLinkControlT">Methods inherited from interface&nbsp;com.grapecity.documents.excel.forms.<a href="ICellLinkControlT.html" title="interface in com.grapecity.documents.excel.forms">ICellLinkControlT</a></h3>
<code><a href="ICellLinkControlT.html#getValue()">getValue</a>, <a href="ICellLinkControlT.html#setValue(T)">setValue</a></code></div>
<div class="inherited-list">
<h3 id="methods-inherited-from-class-com.grapecity.documents.excel.forms.IContentControl">Methods inherited from interface&nbsp;com.grapecity.documents.excel.forms.<a href="IContentControl.html" title="interface in com.grapecity.documents.excel.forms">IContentControl</a></h3>
<code><a href="IContentControl.html#getLockedText()">getLockedText</a>, <a href="IContentControl.html#getText()">getText</a>, <a href="IContentControl.html#setLockedText(boolean)">setLockedText</a>, <a href="IContentControl.html#setText(java.lang.String)">setText</a></code></div>
<div class="inherited-list">
<h3 id="methods-inherited-from-class-com.grapecity.documents.excel.forms.IControl">Methods inherited from interface&nbsp;com.grapecity.documents.excel.forms.<a href="IControl.html" title="interface in com.grapecity.documents.excel.forms">IControl</a></h3>
<code><a href="IControl.html#bringToFront()">bringToFront</a>, <a href="IControl.html#delete()">delete</a>, <a href="IControl.html#getBottomRightCell()">getBottomRightCell</a>, <a href="IControl.html#getEnabled()">getEnabled</a>, <a href="IControl.html#getFormControlType()">getFormControlType</a>, <a href="IControl.html#getHeight()">getHeight</a>, <a href="IControl.html#getLeft()">getLeft</a>, <a href="IControl.html#getLocked()">getLocked</a>, <a href="IControl.html#getName()">getName</a>, <a href="IControl.html#getParent()">getParent</a>, <a href="IControl.html#getPlacement()">getPlacement</a>, <a href="IControl.html#getPrintObject()">getPrintObject</a>, <a href="IControl.html#getShapeRange()">getShapeRange</a>, <a href="IControl.html#getTop()">getTop</a>, <a href="IControl.html#getTopLeftCell()">getTopLeftCell</a>, <a href="IControl.html#getVisible()">getVisible</a>, <a href="IControl.html#getWidth()">getWidth</a>, <a href="IControl.html#getZOrder()">getZOrder</a>, <a href="IControl.html#sendToBack()">sendToBack</a>, <a href="IControl.html#setEnabled(boolean)">setEnabled</a>, <a href="IControl.html#setHeight(double)">setHeight</a>, <a href="IControl.html#setLeft(double)">setLeft</a>, <a href="IControl.html#setLocked(boolean)">setLocked</a>, <a href="IControl.html#setName(java.lang.String)">setName</a>, <a href="IControl.html#setPlacement(com.grapecity.documents.excel.drawing.Placement)">setPlacement</a>, <a href="IControl.html#setPrintObject(boolean)">setPrintObject</a>, <a href="IControl.html#setTop(double)">setTop</a>, <a href="IControl.html#setVisible(boolean)">setVisible</a>, <a href="IControl.html#setWidth(double)">setWidth</a></code></div>
<div class="inherited-list">
<h3 id="methods-inherited-from-class-com.grapecity.documents.excel.forms.IControlT">Methods inherited from interface&nbsp;com.grapecity.documents.excel.forms.<a href="IControlT.html" title="interface in com.grapecity.documents.excel.forms">IControlT</a></h3>
<code><a href="IControlT.html#copy(double,double)">copy</a>, <a href="IControlT.html#cut(double,double)">cut</a>, <a href="IControlT.html#duplicate()">duplicate</a></code></div>
</section>
</li>
</ul>
</section>
<section class="details">
<ul class="details-list">
<!-- ============ METHOD DETAIL ========== -->
<li>
<section class="method-details" id="method-detail">
<h2>Method Details</h2>
<ul class="member-list">
<li>
<section class="detail" id="getGroupBox()">
<h3>getGroupBox</h3>
<div class="member-signature"><span class="return-type"><a href="IGroupBox.html" title="interface in com.grapecity.documents.excel.forms">IGroupBox</a></span>&nbsp;<span class="element-name">getGroupBox</span>()</div>
<div class="block">Gets the first group box that contains the option button. <p>Option buttons in the same group box are in the same group. If this method  returns  <code>null</code>, the option button belongs to the default group.</p> <p>Option buttons in the same group share the value of the  <code>ICellLinkControl.LinkedCell</code> property. They also affect the selection state of other option buttons in the same group.</p>
<pre><code data-language="Java">
 IOptionButton optionButton = worksheet.getControls().addOptionButton(22.2, 24.6, 109.2, 16.8);
 IGroupBox groupBox = worksheet.getControls().addGroupBox(7.8, 6, 196.8, 122.4);
 groupBox.setText("Choices");
 IGroupBox parentGroup = optionButton.getGroupBox();
 String text = parentGroup.getText();
 </code></pre></div>
<dl class="notes">
<dt>Returns:</dt>
<dd>The first group box that contains the option button, or <code>null</code> if the option button is in the default group.</dd>
<dt>API Note:</dt>
<dd>Maintaining the state of this property is expensive. Avoid placing too many group boxes and option buttons in the same worksheet.</dd>
</dl>
</section>
</li>
<li>
<section class="detail" id="getIsChecked()">
<h3>getIsChecked</h3>
<div class="member-signature"><span class="return-type">boolean</span>&nbsp;<span class="element-name">getIsChecked</span>()</div>
<div class="block">Gets whether the  <a href="IOptionButton.html" title="interface in com.grapecity.documents.excel.forms"><code>IOptionButton</code></a> is checked.<p>For option buttons in the same group, a checked state indicates the  currently selected option in that group.</p>
<pre><code data-language="Java">
 IOptionButton optionButton = worksheet.getControls().addOptionButton(20, 20, 72, 18);
 optionButton.setIsChecked(true);
 boolean isChecked = optionButton.getIsChecked();
 </code></pre></div>
<dl class="notes">
<dt>Returns:</dt>
<dd><code>false</code> if the option button is unchecked; otherwise, <code>true</code>.</dd>
</dl>
</section>
</li>
<li>
<section class="detail" id="setIsChecked(boolean)">
<h3>setIsChecked</h3>
<div class="member-signature"><span class="return-type">void</span>&nbsp;<span class="element-name">setIsChecked</span><wbr><span class="parameters">(boolean&nbsp;value)</span></div>
<div class="block">Sets whether the  <a href="IOptionButton.html" title="interface in com.grapecity.documents.excel.forms"><code>IOptionButton</code></a> is checked.<p>For option buttons in the same group, a checked state indicates the  currently selected option in that group.</p>
<pre><code data-language="Java">
 IOptionButton optionButton = worksheet.getControls().addOptionButton(20, 20, 72, 18);
 optionButton.setIsChecked(true);
 </code></pre></div>
<dl class="notes">
<dt>Parameters:</dt>
<dd><code>value</code> - <code>False</code> - Unchecked, <code>true</code> - Checked.</dd>
</dl>
</section>
</li>
</ul>
</section>
</li>
</ul>
</section>
<!-- ========= END OF CLASS DATA ========= -->
<script>var evenRowColor = "even-row-color";
var oddRowColor = "odd-row-color";
var tableTab = "table-tab";
var activeTableTab = "active-table-tab";

function show(tableId, selected, columns) {
    if (tableId !== selected) {
        document.querySelectorAll('div.' + tableId + ':not(.' + selected + ')')
            .forEach(function (elem) {
                elem.style.display = 'none';
            });
    }
    document.querySelectorAll('div.' + selected)
        .forEach(function (elem, index) {
            elem.style.display = '';
            var isEvenRow = index % (columns * 2) < columns;
            elem.classList.remove(isEvenRow ? oddRowColor : evenRowColor);
            elem.classList.add(isEvenRow ? evenRowColor : oddRowColor);
        });
    updateTabs(tableId, selected);
}

function updateTabs(tableId, selected) {
    document.querySelector('div#' + tableId + ' .summary-table')
        .setAttribute('aria-labelledby', selected);
    document.querySelectorAll('button[id^="' + tableId + '"]')
        .forEach(function (tab, index) {
            if (selected === tab.id || (tableId === selected && index === 0)) {
                tab.className = activeTableTab;
                tab.setAttribute('aria-selected', true);
                tab.setAttribute('tabindex', 0);
            } else {
                tab.className = tableTab;
                tab.setAttribute('aria-selected', false);
                tab.setAttribute('tabindex', -1);
            }
        });
}

function switchTab(e) {
    var selected = document.querySelector('[aria-selected=true]');
    if (selected) {
        if ((e.keyCode === 37 || e.keyCode === 38) && selected.previousSibling) {
            // left or up arrow key pressed: move focus to previous tab
            selected.previousSibling.click();
            selected.previousSibling.focus();
            e.preventDefault();
        } else if ((e.keyCode === 39 || e.keyCode === 40) && selected.nextSibling) {
            // right or down arrow key pressed: move focus to next tab
            selected.nextSibling.click();
            selected.nextSibling.focus();
            e.preventDefault();
        }
    }
}
</script></div>