Using checkboxes to add tabs in Touch UI | Community
Skip to main content
A
alistairp781078
New Participant
August 8, 2017
Solved

Using checkboxes to add tabs in Touch UI

  • August 8, 2017
  • 3 replies
  • 2900 views

I'm trying to create a dialog in Touch UI that opens up with a hidden tab in it. If a user ticks a checkbox, the tab and its contents show (if the checkbox is ticked again, the tab returns to its hidden state).

I've found a few examples for adding/changing fields in the same tab but nothing much useful for adding/removing other tabs. So far I have the dialog and a listener in a client library.

The tab in the dialog:

<ctacontainer 
     jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/foundation/container"
     class="hidden showhide-target"
     id="show-cta-tab">
     <items jcr:primaryType="nt:unstructured">
          <calltoactiontab
               jcr:primaryType="nt:unstructured"
               jcr:title="Call To Action"
               sling:resourceType="granite/ui/components/foundation/section" >
               <layout
                    jcr:primaryType="nt:unstructured"
                    margin="{Boolean}false"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" />
               <items jcr:primaryType="nt:unstructured">
                    <column
                         jcr:primaryType="nt:unstructured"
                         sling:resourceType="granite/ui/components/foundation/container" >
                         <items jcr:primaryType="nt:unstructured">
                              ...
                         </items>
                    </column>
               </items>
          </calltoactiontab>
     </items>
</ctacontainer>

And the listener:

//Listener to show/hide item or container based on checkbox value
(function ($, $document) {
    "use strict";
    $(document).on("foundation-contentloaded", function(e) {
        $(".cq-dialog-checkbox-showhide").each( function() {
            showHide($(this));
        });
    });
    $document.on("change", ".cq-dialog-checkbox-showhide", function(e) {
        showHide($(this));
    });
    function showHide($el) {
     var shouldShowWhenChecked = $el.data('should-show-when-checked');
        var isChecked = $el.is(":checked");
        var targetElementSelector = $el.data('show-hide-target');
        var $targetElement = $('#' + targetElementSelector);
        var isVisible = shouldShowWhenChecked ? isChecked : !isChecked;
        $targetElement.toggleClass('hidden', !isVisible);
    }
})($, $(document));

This works to the extent that the fields in the tab appear and disappear. What is odd though is that the tab selector at the top of the container is still showing and without the tab name:

Can anyone provide a reason why the tab button is still showing and how I can get that to disappear with the contents of the tab?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by alistairp781078

    Both, thanks for your help.

    I've appended some additional code to the showHide function that has done the trick.

    var $tabButton = $("[aria-controls='" + targetElementSelector + "']");
    var isVisible = shouldShowWhenChecked ? isChecked : !isChecked;
    $tabButton.toggleClass('hidden', !isVisible);

    Where targetElementSelector is the id property specified in the tab container.

    3 replies

    A
    alistairp781078AuthorAccepted solution
    New Participant
    August 8, 2017

    Both, thanks for your help.

    I've appended some additional code to the showHide function that has done the trick.

    var $tabButton = $("[aria-controls='" + targetElementSelector + "']");
    var isVisible = shouldShowWhenChecked ? isChecked : !isChecked;
    $tabButton.toggleClass('hidden', !isVisible);

    Where targetElementSelector is the id property specified in the tab container.

    cquser1
    cquser1
    New Participant
    August 8, 2017

    Hi,

    Suppose, there are 3 tabs in a dialog and the first one has a dropdown to select which of the other two tabs to be shown.

    and the two tab names are tooltip and popover in crxde.

    then the below js , placed in clientlibs location should ideally work

    $(document).ready(function() {

        $('[data-toggle="tooltip"]').tooltip();

        $('[data-toggle="popover"]').popover();

        $(document).on('click', '.popover > i.close', function (e) {

        e.preventDefault();

            $(this).parent().prev().popover('hide');

    });

    });

    smacdonald2008
    smacdonald2008
    New Participant
    August 8, 2017

    As discussed in the Touch UI Ask the AEM Community Experts - you can use JQuery logic to drive functionality when using Touch UI.

    Scott's Digital Community: April Session of Ask the AEM Community Experts

    Can you write logic to hide the remaining parts you want to hide.

      Terms & ConditionsAccessibility statement

      Loading footer...