Advanced Techniques - Change button image when showing/hiding groupings

This Advanced Techniques workshop will demonstrate how a custom application style can be applied to "Text" buttons that are used to show and hide groupings. Depending on whether the grouping is currently shown or hidden, the button link will show different images in the browser.

Create the application

Go to the Applications module and create a new application based on the Basic application template.

Group all elements on the "All Entries" page together.

Create a new button entitled "Show/Hide".

Go to the "Actions" tab and select "Show/Hide" as the action. The grouping should be automatically selected. The button will be created when you click on "OK".

A new style for the button can be created via the "Edit" menu / Edit layout / Edit layout.

You will find more styles under "OK Buttons". You may need to show these first by clicking on the

arrow button next to it. Select the "Link" entry and then select "Add control element" from the context menu.

Enter "ViewHideButton" as the class and title, and then click on "OK".

Select the new "ViewHideButton" entry and then select "Add CSS rule" from the context menu.

Enter

.ViewHideButton, .ViewHideButton:link[aria-expanded="false"]

as the selector and "ViewHideButtonExpandedFalse" as the title. Click on "OK Select the new "ViewHideButtonExpandedFalse" entry.

You can edit the CSS of this entry in the Element settings area on the right-hand side. Click on "Styles" at the bottom and select

"Show CSS properties in editor". Enter the following CSS here:

.ViewHideButton,
.ViewHideButton:link[aria-expanded="false"]
{
	vertical-align: middle;
	padding: 2px 0 2px 20px;
	background-attachment: scroll;
	text-align: left;
	font-style: normal;
	font-size: 11px;
	background-repeat: no-repeat;
	background-image: url(../../../images/assets/common/size-toggle-2.png);
	background-position: left;
}

Save the CSS and then click on "OK".

In the same way, create a second CSS rule with the selector

.ViewHideButton, .ViewHideButton:link[aria-expanded="true"]

and title "ViewHideButtonExpandedTrue". Enter the following CSS for the second rule:

.ViewHideButton,
.ViewHideButton:link[aria-expanded="true"]
{
	vertical-align: middle;
	padding: 2px 0 2px 20px;
	background-attachment: scroll;
	text-align: left;
	font-style: normal;
	font-size: 11px;
	background-repeat: no-repeat;
	background-image: url(../../../images/assets/common/size-toggle-1.png);
	background-position: left;
}

Save the CSS and then click on "OK".

You can now assign the new style to the button on the "Style" tab in the properties dialog. Click on

"Edit style class" to do this.

Select "[Application]" as the layout and then the style we just created, "ViewHideButton". Apply all dialogs with "OK" and publish the application. This is what the application looks like in the browser:

Advanced Techniques - Change button image when showing/hiding groupings

Create the application

Grouping shown

Grouping hidden