Accordion Control - Icons to Show Open/Close Status
Description
An icon can be displayed to indicate whether or not an Accordion Pane is open.
Discussion
An image can be added to an Accordion Control to indicate if a pane is opened or closed. For example, in the image below, the first Accordion pane is open, and so an icon pointing down is shown. The second Accordion pane is closed, so an icon pointing to the right is shown.
In order to enable this functionality, you simply select the appropriate sub-theme for the Accordion, as shown in the image below.
This sub-theme is defined in the style.js and style.css file in the css\iOS folder. If you wanted to add this behavior to Accordions for other styles (e.g. MobBlue, GrGray, etc.), you would need to modify the style.css and style.js files for these styles as described below.
Adding an Accordion Control Sub-theme
The text below for 'icon' shows the code that was added to the style.js file in the css/iOS folder in order to add a new sub-theme called 'icon' to the Accordion control.
If you wanted to add the accordion icon functionality to a custom style of your own, you would need to edit the corresponding style.js file for that style and make a similar modification.
accordion: {
base: {
titleClassName: 'iOSAccordionButton',
titleSelectedClassName: 'iOSAccordionButtonSelected',
titleDisabledClassName: 'iOSAccordionButtonDisabled',
paneClassName: 'iOSAccordionPane'
},
icon: {
titleClassName: 'iOSAccordionIconButton',
titleSelectedClassName: 'iOSAccordionIconButtonSelected',
titleDisabledClassName: 'iOSAccordionIconButtonDisabled',
paneClassName: 'iOSAccordionPane'
}
},The text below shows the CSS that was added to the style.css file in the css/iOS folder.
If you wanted to add the accordion icon functionality to a custom style of your own, you would need to edit the corresponding style.css file for that style and make a similar modification.
.iOSAccordionIconButton {
display: block;
text-decoration: none;
font: 14px Arial;
font-weight: bold;
color: #6a6a6a;
text-shadow: 0px 2px #d9dbe0;
background-color: #c8c8c8;
background-image: url('accordionClosed.png'), url('button.jpg');
background-position: left, center;
background-repeat: no-repeat, repeat;
background-size: auto, 100% 100%;
border-bottom: #ababab 1px solid;
padding: 8px;
padding-left: 28px;
}
.iOSAccordionIconButtonSelected {
display: block;
text-decoration: none;
font: 14px Arial;
font-weight: bold;
color: #6a6a6a;
text-shadow: 0px 2px #d9dbe0;
background-color: #c8c8c8;
background-image: url('accordionOpened.png'), url('button.jpg');
background-position: left, center;
background-repeat: no-repeat, repeat;
background-size: auto, 100% 100%;
border-bottom: #ababab 1px solid;
padding: 8px;
padding-left: 28px;
}
.iOSAccordionIconButtonDisabled {
display: block;
text-decoration: none;
font: 14px Arial;
font-weight: bold;
color: #aaa;
text-shadow: 0px 2px #d9dbe0;
background: #c8c8c8 url('button.jpg');
background-size: 100% 100%;
border-bottom: #ababab 1px solid;
padding: 8px;
padding-left: 28px;
}