Content Query web part Group by Column in SharePoint Online Office 365

This SharePoint tutorial explains, how to use the Content Query web part to display list items with UI branding in SharePoint Online Office 365.

I came across a requirement where we had to display Questions with a respective answer based on some category. This seems to be quite easy with the SharePoint default view group by option but we had some accordion or expand/collapse UI.

Content Query web part Group by Column in SharePoint Online

The below solution is applicable in Office 365, SharePoint 2013 and SharePoint 2010 as well. Content Query webpart, CSS and jQuery was the quick solution.

Content Query web part Group by Column in SharePoint Online

XSLT Code:

<xsl:template name="Custom" match="Row[@Style=’HelpTip’]" mode="itemstyle">
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="‘LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="‘ImageUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="‘LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
<xsl:variable name="CurPosition" select="count(./preceding-sibling::*)" />
<xsl:if test="count(preceding-sibling::*)=0″>
</xsl:if>
        <table cellpadding="4″ cellspacing="0″ border="0″  >
            <tr>
                 <td class="CustomTit">
                  <xsl:if test="$ItemsHaveStreams = ‘True'">
                    <xsl:attribute name="onclick">
                      <xsl:value-of select="@OnClickForWebRendering"/>
                    </xsl:attribute>
                  </xsl:if>
                  <xsl:if test="$ItemsHaveStreams != ‘True’ and @OpenInNewWindow = ‘True'">
                    <xsl:attribute name="onclick">
                      <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                    </xsl:attribute>
                  </xsl:if>
                  <xsl:value-of select="$DisplayTitle"/>
                <div class="helpDes">
                                <xsl:value-of select="@HelpDescription" disable-output-escaping="yes" />
                </div>
                 </td>
               </tr>
            </table>
    </xsl:template>

Jquery:

$(document).ready(function ()
    {
    $(‘td.CustomTit> td’).hide();
    $(‘td.CustomTit’).click(function () {
        $(this).siblings(‘.opened’).removeClass(‘opened’).end()
            .toggleClass(‘opened’).next(‘td’).slideToggle(‘normal’)
            .siblings(‘td:visible’)
            .slideUp(‘normal’);
        return false;
    });
         $(‘. CustomTit’).on(‘click’, function(){
         $(this).children().toggle();
        });
    $(‘td span’).each(function(){
    //alert(‘ss’);
    var $span = $(this);
    //var divId = $span.closest(‘a’).hide();
    // do something with the above
});
    HideHeaders();
});
function HideHeaders() {
            var elements = getElementsByClassName(document, "td", "ms-gb");
            var elem;
            for (var i = 0; i < elements.length; i++) {
                elem = elements[i];
                elem.childNodes[0].childNodes[1].nodeValue = "";
                elem.childNodes[1].nodeValue = elem.childNodes[1].nodeValue.replace(‘:’, ");
            }
            elements = getElementsByClassName(document, "td", "ms-gb2");
            for (var i = 0; i < elements.length; i++) {
                elem = elements[i];
                elem.childNodes[1].childNodes[1].nodeValue = "";
elem.childNodes[2].nodeValue = elem.childNodes[2].nodeValue.replace(‘:’, ");
            }
        }
        function getElementsByClassName(oElm, strTagName, strClassName) {
            var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);
            var arrReturnElements = new Array();
            strClassName = strClassName.replace(/\-/g, "\\-");
            var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
            var oElement;
            for (var i = 0; i < arrElements.length; i++) {
                oElement = arrElements[i];
                if (oRegExp.test(oElement.className)) {
                    arrReturnElements.push(oElement);
                }
            }
            return (arrReturnElements)
        }

You may like following SharePoint tutorials:

Here, we learned how to use the Content Query web part Group by Column in SharePoint Online Office 365.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>