Hide and show AEM component using authoring

 Hi Friends, today in this article we are going to see an example of how we can hide and show the content of the AEM component using authoring.

First of all, we will add an isHide checkbox field in the component dialog so that an author can set it based on the requirement. Below is the code node structure of isHide node in the component dialog.

{
	jcr:primaryType: "nt:unstructured",
	uncheckedValue: "false",
	name: "./ishide",
	text: "Hide content",
	value: "true",
	sling:resourceType: "granite/ui/components/coral/foundation/form/checkbox",
	fieldDescription: "Hide the content of this component on page."
}

Since we have completed the dialog part now move to the component HTL page where we will manage the rendition.

<sly data-sly-use.objectJorvee="com.jorvee.aem.models.sample.custom.HideShow"></sly>
<sly data-sly-test="${!objectJorvee.isHide}">
	<div>rashidjorvee</div>
	<p>Some content here</p>
</sly

Once you will check the isHide option then after it will be difficult to find the component on the page, hence add the below line of code in the HTL file so that it will show a copy text to configure the component always in edit mode.

<div data-sly-test="${(wcmmode.edit)}"
     style="text-align: center; padding: 20px 0; width: 100%; text-decoration: underline; color: #00a8e1;"
     data-sly-unwrap="${wcmmode.disabled}">Configure your AEM component
</div>