Loading...

Tech Talk Live Blog

Expand and Collapse Groups in Content Query Web Part

Margie Morales


In SharePoint, grouping documents from a library by creating a choice column is a way of organizing content. However, another way to group is to add the Content Query Web Part to a page, which has a grouping parameter, as well as the option to display the groups in different columns. While having an organization strategy for documents is great, when there are many groups and many documents within the groups, the page may appear cluttered.

To add expand and collapse functionality to the groups, a script editor web part can be added to the page. After pasting in the following CSS and JQuery into the script editor web part and saving the page, the groups will be collapsed.

<style type=”text/css”>

.groupheader:before{

content:”+”;

font-weight:bold;

padding-right:10px;

}

.minus:before{

content:”-“;

font-weight:bold;

padding-right:15px;

}

</style>

<script src=”https://code.jquery.com/jquery-1.10.0.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘.cbq-layout-main li ul’).hide();

$(‘.cbq-layout-main ul li’).click(function() {

$(this).closest(‘li’).find(‘.groupheader’).toggleClass(‘minus’);

$(this).find(‘ul’).toggle();

});

});

</script>

The result would look something like below with a plus sign to the left of each group.


When the plus sign is clicked the group expands and switches to a minus sign on the left.

If there are other web parts using the same class of .cbq-layout-main on the page you may need to adjust the JQuery function to target the ID of the web part. The ID begins with #WebPartWPQ2 with the number at the end being different for each web part. You can find this using your browser’s web developer tools. For example, in Google Chrome you can right click to inspect an element and view the corresponding HTML markup.

Tech Talk Live Blog Comment Guidelines:

One of our main goals at Tech Talk Live is to build a community. It is our hope that this blog can be a forum for discussion around our content. We see commenting as an integral part of this community. It allows everyone to participate, contribute, connect, and share relevant personal experience that adds value to the conversation. Respect counts. We believe you can disagree without being disagreeable. Please refrain from personal attacks, name calling, libel/defamation, hate speech, discriminatory or obscene/profane language, etc. Comments should keep to the topic at hand, and not be promotional or commercial in nature. Please do not link to personal blog posts, websites, or social media accounts that are irrelevant to the conversation. This is considered self-promotion. We welcome links that help further the conversation and reserve the right to delete those we deem unnecessary. The appearance of external links on this site does not constitute official endorsement on behalf of Tech Talk Live or Lancaster-Lebanon Intermediate Unit 13. You are solely responsible for the content that you post – please use your best judgment. We reserve the right to remove posts that do not follow these guidelines.

Leave a Reply

Your email address will not be published. Required fields are marked *

CONTACT

Tech Talk Live is the only conference of its kind in the region specifically designed for IT pros in education.


techtalklive@iu13.org
1020 New Holland Avenue, Lancaster, PA 17601

(717) 606-1770