Tips & Tricks - Button images when showing and hiding groupings

This article shows how a self-created application style can be used for buttons with the type "Text" 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

Create a new application in the Applications module using the Basic application template. Select the third line of the grid on the "All entries" page and switch to the zoom area.

There is a grouping containing the table. Create a new button with the title "Show/hide". Switch to the "Actions" tab and select the "Show/hide" action. The grouping should be automatically selected. The button is created by clicking on "OK".

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

Below "OK buttons" in the "Controls" area you will find further styles, which you may first have to show by clicking on the arrow symbol to the left of "OK buttons". Then select the "Link" entry and select the "Edit / Add control element" menu.

Enter "ViewHideButton" as the class and title and click "OK".

Select the "ViewHideButton" entry and then select the "Edit / Add CSS rule" menu.

Enter the selector

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

and the title "ViewHideButtonExpandedFalse". Click "OK".

Select the new entry "ViewHideButtonExpandedFalse".

The CSS can now be edited in the element settings on the right-hand side of the screen. Click on "Styles" at the bottom and select "Show CSS properties in the editor" in the upper area .

Enter the following CSS:

            .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 by clicking on "Save 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 the 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".

The new style can now be assigned to the button on the "View" tab in the properties dialog. To do this, click on "Edit style class".

Select "[Application]" as the layout and then the "ViewHideButton" style you have just created. Close all dialogs by clicking on "OK" and publish the application. Test the result.