Hide/Show parsys on the fly with JavaScript

Hide/Show parsys on the fly with JavaScript

It is relatively painful to deal with tabs, accordion, or carousel component. Especially when we want to enhance content author experience. Here’s a use case to illustrate to you what I meant:

  • We need to build a tabs component.
  • We want author to manage tabs’ content on the page (not via child page or a separate page).
  • We want author to drag and drop any component into any tab’s content they wish.

Bug

The screenshots below show the bugs (visually) when we don’t implement the JavaScript solution:

Tabs displayed on page load:

Figure 1.

Tabs displayed after clicking on “Tab 2”. As we can see that the parsys of the hidden element (tab 1’ content) is not disappeared, but instead they piled up on top of each other (Figure 2).

Figure 2.

Solution

JavaScript class/object to hide/show parsys (don’t forget to load this JS in your clientlibs)


    var toggleParsys = function()
    {
        var that = {};
        var componentPath;

        that.setComponentPath = function(s)
        {
            componentPath = s;
        }

        that.hideParsys = function()
        {
            if (componentPath)
            {
                var parsysComp = CQ.WCM.getEditable(componentPath);

                if (parsysComp)
                {
                    parsysComp.hide();
                }
            }
        };

        that.showParsys = function()
        {
            if (componentPath)
            {
                var parsysComp = CQ.WCM.getEditable(componentPath);

                if (parsysComp)
                {
                    parsysComp.show();
                }
            }
        };

        return that;
    }();

In the JSP file of tab component (don’t forget to replace PATH_TO_YOUR_PARSYS with the real/actual path):


    ...
    <script> $CQ(document).ready(function(){ toggleParsys.setComponentPath("<%= currentPage.getPath() %>/jcr:content/PATH_TO_YOUR_PARSYS"); }); </script>
    ...

On the JavaScript function to hide/show tab content element, invoke:

  • toggleParsys.hideParsys() in the tab javascript’s function for hiding tab content element.
  • toggleParsys.showParsys() in the tab javascript’s function for showing tab content element.

For example:


    var myTab = function()
    {
        var that = {};

        // some more codes here

        that.showTabContentOnTabClick = function()
        {
            // some more codes here
            toggleParsys.showParsys();
            // some more codes here
        };

        that.hideTabContentOnTabClick = function()
        {
            // some more codes here
            toggleParsys.hideParsys();
            // some more codes here
        };

        // some more codes here

        return that;
    }();

Outcome

Below should be the outcome after user clicks on “Tab 2”

Figure 3.

Credits

This solution is based on this article: http://cqfive.blogspot.ca/2013/11/hiding-parsys-component-via-javascript.html

Share this post

0 Comments

comments powered by Disqus