In a Sitecore SXA, is it possible to hide the HTML at the component level for desktop as well mobile at a time?

If there is an option, can you please show it?

  • You mean using css? You can use the styles feature to apply classes to components. – Michael West Apr 13 at 2:23
  • What do you mean with "hide the html"? Do you want to hide it for visitors - in that case you can use the answer from Peter. Or do you really want to remove it from the html source? In that case you need the rules engine and personalization. – Gatogordo Apr 13 at 7:39

To add a CSS class for a rendering:

  • First go to the /sitecore/media library/Themes/<TenantName>/<SiteName>/<ThemeName>/styles folder and look for the component on which you want to apply new css rule. eg, component-accordion.

enter image description here

  • Download the CSS file present in the Media field of the component and append a new rule in the downloaded file. In your case, you can add something like .hide-accordion {display: none;}. Save the file and attach to the same component. Save the item and publish.
  • Open site in Content root and navigate to Presentation/Styles. Every Component has its own Style item underneath the "Styles" node. In here, right-click the same component (for which you added a new CSS rule) to add new Style items eg. Accordion. Insert a new style here or duplicate the existing one. Give this style a meaningful name and enter the correct class name in the value field.

enter image description here

  • Now in experience editor, if you will use the same component, you will see the new style to use.
  • But how this will help hide component for either Desktop or Mobile? You are missing this in your answer – Peter Procházka Apr 13 at 4:22

You can achieve this on component level. For example with Bootstrap 4 grid settings, you can set visibility of component under Styling in Advance tab for each viewport:

enter image description here

I have added Accordion component to the page but you can use any component. This functionality is OOTB in SXA.

  • Yes thanks for your answer – Sreekanth Apr 14 at 3:15
  • 1
    Then please upvote and accept the answer as correct one if it satisfies your answer – Peter Procházka Apr 14 at 5:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.