Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM) | AEM Community Blog Seeding

kautuk_sahni
Community Manager
Community Manager

BlogImage.jpg

How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM) by techforum

Abstract

This tutorial explains the approach to hide and show the tabs in Coral 3 Touch UI dialog.
Define Dialog

As a first step, define a Coral UI 3 Touch UI dialog (cq:dialog) with tabs and other required fields.

Define the Event Listener
Let us now define a even listener that will hide and show the tabs as required.
Define a cq:ClientLibraryFolder node under the component with the name clientlibs and add the below properties.
categories (String[]) —  e.g customvalidation

This script hide the second tab(Column1) on dialog load and shows the tab on the change event of the drop down with class name .presets

(function (document, $, Coral) {var $doc = $(document);$doc.on('foundation-contentloaded', function(e) {var coralTab = $(".tabtest coral-tablist coral-tab");
coralTab[1].hide();console.log(coralTab[1].get);$('.presets', e.target).each(function (i, element) {Coral.commons.ready(element, function (component) {$(component).on("change",function (event) {var coralTab = $(".tabtest coral-tablist coral-tab");
coralTab[1].show();});});});});
})(document, Granite.$, Coral);

Read Full Blog

How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM)

Q&A

Please use this thread to ask the related questions.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

0 Replies