Tips & Tricks - Change button image when showing/hiding groupings

This Tips & Tricks article 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 an 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.

Below "OK Buttons" you will find further styles, which you may have to show first by clicking on the arrow to the left of them. Select the "Link" entry and then select "Add control element" in the Edit 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 Edit 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 "View" 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:

Grouping shown

Grouping hidden